React setState Tutorial 2017 - Add items to a list

Learn how to modify React state using the setState method.

React 101 - Free Online Course

Want to see more React tutorials? Let me know in the comments.

THE BEST OF

SUBSCRIBE

LET'S CONNECT!
Ihatetomatoes

Petr Tichy

[MAgeCZ]

Great video Peter! I have only one question. In addItem function you define buyItems const by destructuring but I dont see any usage of it. Am I missing something?

[fahadbilal]

would love to see an example utilizing bootstrap + react + axios, populating data in a bootstrap table via some api and using various bootstrap elements. Love your work!

Checkout:

[deepikasrinivasasharma]

How to do this if we have multiples input fields.. Like name, age, country ?

[peterdaze]

im having issues trying to implement "ref" to Form.Input from semantic-ui-react, if i use a regular form input it does work... i heard i can use onchange to solve this .. any ideas???? i get this error....

```
×
TypeError: Cannot read property 'value' of undefined
Tablex.addItem
src/Tablex.js:21
18 | addItem(e){
19 | e.preventDefault();
20 | const {buyItems} = this.state;
> 21 | const newItem = this.newItem.value;
22 |
23 |
24 | this.setState({
View compiled
onSubmit
src/Tablex.js:43
40 |
41 | <h1>Shopping List</h1>
42 |
> 43 | <Form onSubmit={(e) => {this.addItem(e)}}>
44 | <Form.Group inline className="form-add">
45 | <Form.Input ref={input => this.newItem = input} type="text" placeholder="New Item" className="form-add" id="newItemInput" />
46 |
View compiled
▶ 21 stack frames were collapsed.
```

[deijutsu]

I have a question. Im trying to use the react toolbox api on a project. but idk how to export the css content to a external css file to add it on my website.
I have the same setup from webpack 101 course.

Thanks in advice

[NoonGalaxy]

what to do if you have 2 input fields?

[shrikantraut]

Awesome video man! I suppose you're covering great stuff like refs and keys used in a very simple fashion.

According to my observations - people still don't use the aforementioned features, for as much useful as they are. Some even try to get away with jQuery as an alternative to it(which, in my opinion is inappropriate).
I suppose you'll also cover some scenario for _forceUpdate()_ function of react? Please do so.

Anyways, great videos!! Can't wait for the next one!!

[alistairlobo]

Would really love a video of how you integrated react with twitter bootstrap.

[amankumarsingh]

It proved really useful for me. Thanks a ton!!

[wisnuaryadipa]

Love your video so much.
I have question about ref, why you dont use ReactDOM.findDOMNode to get ref value?
and than about onSubmit action {(e) => {this.addItem(e)}} what differences thats action with {this.addItem.bind(this)} ?? i got tutorial using {this.addItem.bind(this)} << this query on meteor website

Thank You

[jerrynwaeze]

I want to know you as a person... I feel like I should do more for you. This is prolly one of the best...

[daniyalkhan]

Thanks, such a great tutorial, well explained..

[pankaj_]

very well explained.. u r doing good job. i appreciate it

[TheCastaz]

Thanks for the great video!
One question: how do I handle multiple fields? Let's say "Item" and "quantity"?

[vikasni]

Sir i just love urs videos... And also ilove tomatoes

[paulpeterson]

Petr, do you have any guidance on how to get up to speed with styling/svg, like how you redesigned the layout from the last video?

[downforce]

tq sir babanas for the tutorial. subscribed

[phillipscards]

Thank you! Can't wait for each new tut!

[GniewkoOstrowski]

good, but one thing may be confusing for some, you use input on the form ref and if you said it would change to {form => this.addForm = form} would be nice.