Adding an item to a list in React

Question

I want to add a new fruit to the current list of fruit but I am unsure how to go about doing it, I am currently posting an empty string on submit, which just adds an empty string li to the list

my fruit list component is as follow;

import AddFruit from './AddFruit';

class Fruits extends Component {
  state = {
    fruits: ['apple', 'banana']
  };

  render() {
    const { fruits } = this.state;
    return (
      <div style={{ paddingTop: 30 }}>
        <AddFruit handleSubmit={this.handleSubmit} />
        {fruits.map(fruit => {
          return (
            <ul key={fruit}>
              <li>{fruit}</li>
            </ul>
          );
        })}
      </div>
    );
  }

  handleSubmit = e => {
    const { fruits } = this.state;
    e.preventDefault();
    this.setState({ fruits });
  };
}

export default Fruits;

and my fruit adder is as follows... I know they are totally wrong but I'm having a tough time figuring this out and its late :(


class AddFruit extends Component {
  state = {
    addItem: ''
  };
  render() {
    const { addItem } = this.state;
    return (
      <div>
        <form onSubmit={this.handleSubmit} style={{ paddingTop: 35 }}>
          <input
            type="text"
            value={addItem}
            placeholder="Add Item"
            onChange={this.handleChange}
          />
          <button
            onClick={this.props.handleSubmit}
            className="btn btn-primary btn-sm"
          >
            Add Fruit
          </button>
        </form>
      </div>
    );
  }

  handleChange = event => {
    console.log(event.target.value);
    const { value } = event.target;
    this.setState({ addItem: value });
  };
}

export default AddFruit;

Dmitry Reutov · Accepted Answer · 2019-10-14 19:25:27Z

1

it is not clear what kind of element invokes HandleSubmit, but lets say it is input so the code is

handleSubmit = e => {
  e.preventDefault();
  const fruitName = e.target.value;
  const fruits = [...this.state.fruits, fruitName];
  this.setState({ fruits });
};

answered Oct 14, 2019 at 19:25

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

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

1 Comment

Rowandinho Over a year ago

great.. thanks for your help. I have amended the question a little as I had posted the same code snippet twice. You can now see how the handleSubmit is being handled. Unfortunately, I am posting an empty string only with your reply :/

Melchia · Accepted Answer · 2019-10-14 20:46:43Z

0

This is a problem on how to pass data from child component to its parent in ReactJS:

Fruits

  <AddFruit onFruitsChange={this.onFruitsChange} />

  onFruitsChange = fruit => {
    const { fruits } = this.state;
    fruits = [ ...fruits, fruit]
    this.setState({ fruits });
  };

AddFruit

<button
        onClick={this.onAddFruit}
        className="btn btn-primary btn-sm"
      >

  onAddFruit = (e) => {
    e.preventDefault();
    const fruit = this.state.addItem;
    this.props.onFruitsChange(fruit)
  };

edited Oct 14, 2019 at 20:46

answered Oct 14, 2019 at 20:37

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Collectives™ on Stack Overflow

Adding an item to a list in React

2 Answers 2

1 Comment

Fruits

AddFruit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Fruits

AddFruit

Comments

Your Answer

Sign up or log in

Post as a guest

Related