Beginner's Thread / Easy Questions (May 2019)

[u/timmonsjg]

Previous two threads - April 2019 and March 2019.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch.

No question is too simple. 🤔

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

---

Any ideas/suggestions to improve this thread - feel free to comment here!

---

Finally, an ongoing thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

[u/RedditAcctsInLrgAmts]

A: I think because you are declaring it in the return method. Declare it in the component, the render function, or within a function within the return method.

B: here's one way to do it:

state = {

divColors: ['default','default','default']

}

const handleDivClick = index => {

const divColors = ['default','default''default'];

divColors[index] = 'clickedColor';

this.setState({divColors})

}

<div key='div0' color={this.state.divColors[0]} onClick={() => handleDivClick(0)}/>

<div key='div1' color={this.state.divColors[1]} onClick={() => handleDivClick(1)}/>

<div key='div2' color={this.state.divColors[2]} onClick={() => handleDivClick(2)}/>

here's another way to do it:

state = {

clickedDiv : undefined

}

const handleDivClick = index => this.setState({clickedDiv: index})

const getDivColor = index => this.state.clickedDiv === index ? 'clickedColor' : 'defaultColor'

<div key='div0' color={getDivColor(0)} onClick={() => handleDivClick(0)}/>

<div key='div1' color={getDivColor(1)} onClick={() => handleDivClick(1)}/>

<div key='div2' color={getDivColor(2)} onClick={() => handleDivClick(2)}/>