Adding items to a div with React

Question

I have a div element in which I want to show one item on a click of a button. But every time a user clicks a button, I want him to be able to add another item, and another, etc. Making it a list.

How do I accomplish this with React?

I know I have to separate an item, right?

const Item = () => (
  <div>
    <h1>Hello</h1>
  </div>
)

And then? I'm assuming it's not the same as simply showing/hiding a div with ternary operators? Because the button needs to add +1 every time someone clicks it. Or am I wrong?

Can someone please point me in the right direction because I'm not sure how to search this? Thank you!

Jhm · Accepted Answer · 2019-09-05 17:42:33Z

3

Simply put store your item data to state, then use map on that state e.g.

If you use hooks for state.

{items && items.map(item => <Item someProp={item.someValue} />)}

If you have a class based component.

{this.state.items && this.state.items.map(item => <Item someProp={item.someValue} />)}

Note the && is there so react doesn't try to map over a empty state and only maps if the value is truthy aka in this case the state has something in it, if you would try to map over a empty state it would crash react.

edited Sep 5, 2019 at 17:42

answered Sep 5, 2019 at 17:20

Jhm

1013 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding items to a div with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related