These are chat archives for FreeCodeCamp/Help

25th
Sep 2018
Ian Nicholson
@ipnicholson
Sep 25 2018 00:50
Hey y'all! High school teacher here, can someone point me to where in the freeCodeCamp curriculum does Glitch start getting used?
Smootimus
@Smootimus
Sep 25 2018 02:00
I don't believe it tells you to use Glitch like that :eyes:
I believe that's pretty much on your own prefernce
Kyle Holm
@thekholm80
Sep 25 2018 02:26
it's suggested for the back end, api and some of the other sections
Smootimus
@Smootimus
Sep 25 2018 02:52
oooooh
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:06

Hi I fetched an api and saved it in the state.

// Chart.js
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
      .then(res => res.json())
      .then(data => this.setState({
        raw: data,
        data: data.data
      }))
  }

  render() {
    var { data } = this.state.data;
    return (
      <div>
        <Plot {...data} />
      </div>
    )
  }

When I'm trying to log those data in the Plot.js. I only get undefined. What is the reason behind it?

const Plot = (props) => {
  console.log(props.data);
  return (
    <div>
    </div>
  )
}
Ian Nicholson
@ipnicholson
Sep 25 2018 03:08
Re: Glitch, I'm getting the correct result in Glitch, freeCodeCamp runs the tests, tests complete, but no further output - anyone else had this problem?
Aditya
@ezioda004
Sep 25 2018 03:15
@ipnicholson Which challenge?
Aditya
@ezioda004
Sep 25 2018 03:20
@isemaj_gitlab <Plot {...data} /> You arent passing as props
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:20
what is the right way?
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:26
but I set it in var { data } = this.state.data;.
Claudio Restifo
@Marmiz
Sep 25 2018 03:32
@isemaj_gitlab cause fetch is async, but Plot gets rendered anyway so on first render is undefined (the data is not there yet)
you can conditionally render Plot only od data being present :)
(i usually use a loading indicator )
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:35
what loading indicator? how is that?
Claudio Restifo
@Marmiz
Sep 25 2018 03:43
@isemaj_gitlab Well, many pages has a spinner or something to indicate the user something is loading. I generally render one of this or the component once the data is there to let the user know my program is doing something and is not just hang out
But for the time being you can simply say:
as long as data is undefined don't render Prompt
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:44
oh ok I thought something different
@Marmiz this one works. Is this correct?
        {
          this.state.data ? 
          this.state.data.map((item) => <h3>{item[0]}</h3>)
          :
          <h3>Fetching...</h3>
        }
Claudio Restifo
@Marmiz
Sep 25 2018 03:52
@isemaj_gitlab lgtm
fyi you can also render null
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 03:54

but when I use this instead

        {
          data ? 
          data.map((item) => <h3>{item[0]}</h3>)
          :
          <h3>Fetching...</h3>
        }

It is Fetching... forever. Even I destructure it in var { data } = this.state.data;

Aditya
@ezioda004
Sep 25 2018 03:56
@ipnicholson Did you update the package.json file in the your clone glitched project? Also, what URL are you pasting on FCC?
Ian Nicholson
@ipnicholson
Sep 25 2018 04:00
@ezioda004 Yes, on line 6: https://motley-carpenter.glitch.me
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 04:03
oops sorry I should var { data } = this.state
Claudio Restifo
@Marmiz
Sep 25 2018 04:04
@isemaj_gitlab is data in state.data?
Aditya
@ezioda004
Sep 25 2018 04:04
@ipnicholson You linked npm challenge, but in the screenshot its node challenge?
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 04:08
@Marmiz no
Claudio Restifo
@Marmiz
Sep 25 2018 04:10
@isemaj_gitlab you replied yourself before
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 04:13

@Marmiz oh ok. But now I'm trying to pass the data to Plot component

        {
          data ? 
          <Plot {...data} />
          :
          console.log(data)
        }

And I'm trying to log it now in Plot component

const Plot = (props) => {
  console.log(props.data);
  return (
    <div>
    </div>
  )
}

And I'm getting undefined. What does it mean?

Claudio Restifo
@Marmiz
Sep 25 2018 04:14
have you tried a console.log(props) instead of props.data in the Plot function
Ghost
@ghost~5b53da7dd73408ce4fa1d2e5
Sep 25 2018 04:15
oops yeah. Sorry it is now working. Thank you.
Claudio Restifo
@Marmiz
Sep 25 2018 04:18
perhaps a read on Spread syntax would be helpful :wink:
Ian Nicholson
@ipnicholson
Sep 25 2018 04:24
@ezioda004 Whoops, have several screenshots here. This is correct: https://imgur.com/a/604NxIh
Aditya
@ezioda004
Sep 25 2018 04:26
@ipnicholson How does your package.json look? Just tried by cloning a new project, changed author field and its passing the tests.
Ian Nicholson
@ipnicholson
Sep 25 2018 04:27
@ezioda004
{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",
  "name": "hello-express",
  "author": "Ian Nicholson",
  "version": "0.0.1",
  "description": "A simple Node app built on Express, instantly up and running.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.3"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/hello-express"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}
Aditya
@ezioda004
Sep 25 2018 04:30
@ipnicholson I think you cloned the node/express project, try cloning this one and update the package.json file
Ian Nicholson
@ipnicholson
Sep 25 2018 04:33
@ezioda004 aaaaagh I didn't realize there was a freeCodeCamp project that had to be cloned, I picked up the curriculum partway through on account of prior knowledge
@ezioda004 Anyway, it's working now, thanks
Aditya
@ezioda004
Sep 25 2018 04:35
Yeah all backend challenges needs to be done by cloning the respective projects since the unit tests are different for each of them
Ian Nicholson
@ipnicholson
Sep 25 2018 04:48
@ezioda004 Is that in the instructions? I didn't read anything like that, or see a list of fCC projects to clone on Glitch
Aditya
@ezioda004
Sep 25 2018 04:50
@ipnicholson Yes its in the instructions
Ian Nicholson
@ipnicholson
Sep 25 2018 04:51
@ezioda004 I mean a link to the starter project
Aditya
@ezioda004
Sep 25 2018 04:52
@ipnicholson Its at the bottom of it
Ian Nicholson
@ipnicholson
Sep 25 2018 04:52
@ezioda004 Oh man, i see it now.
The dark green looks a lot like the black text
Aditya
@ezioda004
Sep 25 2018 04:53
Its more visible in dark mode :D
Ian Nicholson
@ipnicholson
Sep 25 2018 04:56

@ezioda004 TIL thanks, night mode enabled 🙌

OK, I know what happened - I skimmed the module intro and when I saw Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.I went straight to Glitch thinking any node project would work

Aditya
@ezioda004
Sep 25 2018 05:17
Yeah, thats misleading
psyperl
@psyperl
Sep 25 2018 06:39
Ms. Leading
Manish Giri
@Manish-Giri
Sep 25 2018 07:08
@psyperl did you install Mojave
I just did, and the new dark UI looks stunning
psyperl
@psyperl
Sep 25 2018 07:25
@Manish-Giri o wow .. yeah can't install yet.. in the middle of proj running
Hall
@channinghall
Sep 25 2018 07:25

@channinghall
Help!请问使用转义字符将下面三行文本字符串赋给变量myStr。

FirstLine
\SecondLine
ThirdLine
var myStr = FirstLine \n \b \SecondLine \nThirdLine; // Please change this line

psyperl
@psyperl
Sep 25 2018 07:27
@channinghall maybe you need ""?
Manish Giri
@Manish-Giri
Sep 25 2018 07:29
Screenshot 2018-09-25 03.28.23.png
dark safari
psyperl
@psyperl
Sep 25 2018 07:29
haha nice
Manish Giri
@Manish-Giri
Sep 25 2018 07:30
Screenshot 2018-09-25 03.29.13.png
psyperl
@psyperl
Sep 25 2018 07:31
it should blend with gitter darkmode.. and other site dark mode
who can do this? I can t search it on Google
psyperl
@psyperl
Sep 25 2018 07:38
@channinghall \b is not backslash
FirstLine newline tab backslash SecondLine newline ThirdLine
Hall
@channinghall
Sep 25 2018 07:39
I want the answer of this question,
Hall
@channinghall
Sep 25 2018 07:50
var myStr =“ FirstLine\n\t\SecondLine\nThirdLine;” // 请修改这一行
this is the answer,got it
psyperl
@psyperl
Sep 25 2018 07:51
:thumbsup:
Joseph
@revisualize
Sep 25 2018 07:55
la la la la.
Hall
@channinghall
Sep 25 2018 08:01
lo lo lo....lol
EricMa1
@EricMa1
Sep 25 2018 08:40
.green-box {
background-color: green;
margin-right:20px;
margin-left:40px;
margin-bottom:20px;
margin-top:40px;
}
is there anything wrong?
i can't pass this test
SHASHANK TEWARI
@shanky199912
Sep 25 2018 09:47
how can i add a screenshot in the gitter chat?
May Kittens Devour Your Soul
@diomed
Sep 25 2018 09:59
@shanky199912 drag image to the chat
@EricMa1 you shouldn't have spaces between :
I mean, in the real coding world, sure, you can, no problem, but in FCC tests, maybe they cause issues
Hall
@channinghall
Sep 25 2018 10:17
drag is ok
May Kittens Devour Your Soul
@diomed
Sep 25 2018 10:18
unless you're a man
Anton Angelo Palermo
@samplesage
Sep 25 2018 11:25
Hi why does the size of my image affects my bootstrap 4 carousel's size? I couldn't find any answers so I decided to ask here. haha
May Kittens Devour Your Soul
@diomed
Sep 25 2018 13:29
@samplesage you have to show the code, or link to it
troncarter
@troncarter
Sep 25 2018 16:08
does the course include async JS?
Kyle Holm
@thekholm80
Sep 25 2018 16:21
there are lessons & guides that deal with async actions & behavior
in the fCC curriculum
psyperl
@psyperl
Sep 25 2018 16:27
not sure curriculum covers that
but some guides yeah
Christopher McCormack
@cmccormack
Sep 25 2018 16:34
Seems like they should have a lesson on Promises at least right?
psyperl
@psyperl
Sep 25 2018 16:35
Promise lesson would be nice yeah
const gotResult = true
new Promise( (remember, forgot) => 
  gotResult 
    ? remember(gotResult) 
    : forgot(Error("wut, i didn't say that") )
)
Nicolas Ramirez
@kamatheuska
Sep 25 2018 17:06
I found this very heplful while learning about Promises
Also, this playlist from the Fun Fun Function channel in youtube, is pretty useful while learning Async js https://www.youtube.com/playlist?list=PLolWHsbNv7PqQ32EXkHWIukQe_7UebGIK
@troncarter
Henry
@GitHub-Henry
Sep 25 2018 17:16
I wondered why fetch wasn't included since it's part of the web api, promises, async & await and fetch seem to be a natural together
Christopher McCormack
@cmccormack
Sep 25 2018 17:17
fetch still needs a polyfill on some browsers, probably why. They should include it though.
Chris
@cparsons06
Sep 25 2018 20:04
hello does anyone know how to get the 'history' command in the terminal to display EVERY past command? Mine only shows the last 1000
Sulkhan Abashidze
@sulkhaniaba
Sep 25 2018 20:13
how to start react app with yarn?
alpox
@alpox
Sep 25 2018 20:22
@sulkhaniaba yarn start
@cparsons06 I don't think more than that are saved. This prevents you from cluttering your disk. If you want more than 1000 you can set an environment variable in linux, probably HISTSIZE (You could do this in your .bashrc file)
Christopher McCormack
@cmccormack
Sep 25 2018 20:30
@cparsons06 Can you use echo -e "\n\nHISTSIZE=5000\nHISTFILESIZE=2000\n" > ~.bashrc?
Aditya
@ezioda004
Sep 25 2018 22:06
@thekholm80 TDD
Kyle Holm
@thekholm80
Sep 25 2018 22:08
rofl
@ezioda004 i write my tests after i write the code
psyperl
@psyperl
Sep 25 2018 22:50
i write the code that writes the test :trollface:
psyperl
@psyperl
Sep 25 2018 22:58
i made a button today.. and the button text size looks differently on any screen :smiley:
Kyle Holm
@thekholm80
Sep 25 2018 23:02
you are now promoted to css wizard
Karma Drukpa
@coderkarma
Sep 25 2018 23:14
@psyperl make radio button next .
Kyle Holm
@thekholm80
Sep 25 2018 23:19
yes! differently-styled radio buttons
Karma Drukpa
@coderkarma
Sep 25 2018 23:20
@thekholm80 never got reply once you were done with cooking. you bluffed me.
:crying_cat_face:
Kyle Holm
@thekholm80
Sep 25 2018 23:21
huh?
Karma Drukpa
@coderkarma
Sep 25 2018 23:22
Remember I asked for help couple days ago and you said you will get back once you are done cooking but I never got response from you on gitter that day. lol
Kyle Holm
@thekholm80
Sep 25 2018 23:23
oh right
it looked like you had 20 people helping you
not sure what i could have added
Karma Drukpa
@coderkarma
Sep 25 2018 23:23
lol
hahahahha
Nicolas Ramirez
@kamatheuska
Sep 25 2018 23:38
@coderkarma need help? :)