These are chat archives for FreeCodeCamp/Help

23rd
Jan 2019
abraham anak agung
@padunk
Jan 23 01:15
@tundeiness When you write a component with React, you have to use PascalCase like Display or DrumsMachine
Claudio Restifo
@Marmiz
Jan 23 03:04
@cmccormack all good. Ended up concatenating files instead of writing it. Seems more "elegant"
lost_night
@Remakeo
Jan 23 07:23
确保你更换的按钮为 target4。这句话是什么意思
tundeiness
@tundeiness
Jan 23 08:33
@cmccormack yes I am good I never considered casing as the issue though, but it's good to be jolted back to reality.
tundeiness
@tundeiness
Jan 23 08:39
@padunk I wrote the codes like that because of what I read about stateless and stateful components. I made sure that I have only one stateful component which is App and the other stateless components are display and the others. Now the best practice according to wes bos is to write the name of stateless component which is also a function in lower casing so as to differentiate it from the stateful component and that was what i did in that code. I have a const display and const dis-controls. It is just a way of differentiating which component is stateless and stateful.
abraham anak agung
@padunk
Jan 23 08:56
@tundeiness There is a good article about naming convention for React component here
I never read about wes bos training, but maybe it is about using class for stateful component and using function with stateless component. Either way, you have to use Capitalized name for a component
Aditya
@ezioda004
Jan 23 09:16
Components is usually in TitleCase, that is the convention most people use regardless of the component being stateful or stateless.
Claudio Restifo
@Marmiz
Jan 23 10:33
I always thought that was a requirement from JSX - React.CreateElement, that custom components have to be capitalized... and not a convention :scream:
tundeiness
@tundeiness
Jan 23 15:00
@padunk I guess you are right @ezioda004
May Kittens Devour Your Soul
@diomed
Jan 23 16:00
I will have to admit, my tweets sound a bit different when read aloud by the prosecuting attorney.
Christopher McCormack
@cmccormack
Jan 23 16:02
@Marmiz I think it is
SaintoftheGallows
@SaintoftheGallows
Jan 23 17:45
whats up all!?! I have a question for ya
Im not understanding why this isn't working

input from user Coffee by the pound

Define price per pound

add shipping $1 per pound(if any)

remove shipping if over $150 (before tax)

add 7% tax

display 4values with $ right up against first digit

Coffee = float(input('Enter Coffee amount in Pounds: '))

if Coffee <10:
base_pounds=12.00
tax = base_poundsCoffee.07
Coffee = base_pounds*Coffee+tax
print('The gross price is $', format(Coffee, ',.2f'), sep='')

if Coffee >= 10:
base_pounds =10.00
Coffee = base_pounds*Coffee
print('The gross price is $', format(base_pounds, ',.2f'), sep='')

the bold is my end goal, I just don't understand how to get one or the other
Bexcell
@Bexcell
Jan 23 17:52
can anyone help me find Waldo
im stuck on this one problem
Christopher McCormack
@cmccormack
Jan 23 18:01
@SaintoftheGallows please use markdown when sharing code. There's a little button on the bottom right (M↓) that shows how to display formatted code. If this is Python, you might also want to try the https://gitter.im/FreeCodeCamp/python channel
SaintoftheGallows
@SaintoftheGallows
Jan 23 18:10
k, thanks. I did go to that channel as well.
Levis
@agabyte
Jan 23 20:27
Is there a gov data API that's not affected by the shutdown out there?
glitz20
@glitz20
Jan 23 21:48
hey guys can I pass state in axios request like this?
 axios.get('/items/description/' + this.state.id)
Jason Luboff
@JLuboff
Jan 23 21:56
@glitz20 Is that axios request inside your stateful component? If so...I don't see why that wouldn't work
glitz20
@glitz20
Jan 23 22:10
yeah it is an axios request
glitz20
@glitz20
Jan 23 22:17
 componentDidMount() {
        axios.get('/responses/editcomment/' + this.props.match.params.id)
           .then(response => {
            this.setState({
                    answer: response.data[0].answer,   
                    id: response.data[0].id               
                });
            })
            .catch(function (error) {
                console.log(error);
            })
        axios.get('/items/description/' + this.state.id)
            .then(response => {
                this.setState({
                    survey1: response.data.survey1,       
                });
            })
            .catch(function(error) {
                console.log(error);
            })
   }
@JLuboff here is the snipett
Christopher McCormack
@cmccormack
Jan 23 22:41
@glitz20 is there an issue?
glitz20
@glitz20
Jan 23 23:12
yeah my state for id is not getting updated
 console.log(response.data[0].id  )
returns correct id, but the state of in not updated
            .then(response => {
                console.log(response.data[0].id  )
                this.setState(
                    id: response.data[0].id               
                });
            })
Christopher McCormack
@cmccormack
Jan 23 23:20
how are you determining it's not being updated?
glitz20
@glitz20
Jan 23 23:22
console.log(this.state.id)
Christopher McCormack
@cmccormack
Jan 23 23:22
where?
in your .then?
setState is often asynchronous so you would need to check in the callback function
glitz20
@glitz20
Jan 23 23:23
then(response => {
                console.log(response.data[0].id  )
                this.setState({

                    id: response.data[0].id               
                });
            })

            .catch(function (error) {
                console.log(error);

            })
        console.log(this.state.id)
Christopher McCormack
@cmccormack
Jan 23 23:23
this.setState({
    id: response.data[0].id 
}, newState => console.log(newState.id));
try something like that

https://reactjs.org/docs/react-component.html#setstate

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

glitz20
@glitz20
Jan 23 23:33
should I declare newState as a initial state too?
@cmccormack
Christopher McCormack
@cmccormack
Jan 23 23:35
@glitz20 no that's just your callback parameter, call it whatever you want
glitz20
@glitz20
Jan 23 23:38
I am getting this error
TypeError: Cannot read property 'id' of undefined
Here is what I have
   componentDidMount() {
        axios.get('/responses/editcomment/' + this.props.match.params.id)

            .then(response => {
                console.log(response.data[0].id  )
                this.setState({

                    response5: response.data[0].response5,
                    id: response.data[0].id               
                },
                      newState => console.log(newState.id)
                );
            })

            .catch(function (error) {
                console.log(error);

            })
Christopher McCormack
@cmccormack
Jan 23 23:41
hmm maybe use something like this instead
this.setState({
    id: response.data[0].id 
}, () => console.log(this.state.id));
Amit Patel
@AmitP88
Jan 23 23:43
hey guys, does anyone here have experience building React Native apps? I'm trying to build my first one but I'm having trouble getting it to work on Expo for Android (I keep running into Network response timed out errors and I've tried so many solutions on google without avail)
I've even tried using Android Studio but that doesn't work either (I run into "your device is not authorized for debugging" or something like that)
glitz20
@glitz20
Jan 23 23:45
I am getting this error now
GET http://localhost:3000/editcomment/bundle.js 404 (Not Found)
Christopher McCormack
@cmccormack
Jan 23 23:46
is match from React router?
glitz20
@glitz20
Jan 23 23:47
I think it is because I am not able to get state of id outside of then
I have this, after the above mentioned axios request
axios.get('/items/description/'+ this.state.id)
            .then(response => {
                console.log(this.state.id)
                console.log(response.data)
                this.setState({

                    survey5: response.data[0].survey5
                });
            })

            .catch(function(error) {
                console.log(error);

            })
so the axios request relies on the state of id that we got
Christopher McCormack
@cmccormack
Jan 23 23:49
if it depends on the previous call you need to nest the second within your .then
glitz20
@glitz20
Jan 23 23:49

I am not getting correct id when I do

    console.log(this.state.id)

outside of then()

Christopher McCormack
@cmccormack
Jan 23 23:49
correct you are using async functions you have to adjust for that
glitz20
@glitz20
Jan 23 23:54
do you know how I can nest? I am getting an error
Christopher McCormack
@cmccormack
Jan 23 23:56
put one in the other
play with it, try to figure out your issue from the errors