CODEWITHSUNDEEP
javascriptreactjs
Ycon
Ycon

Reputation: 1950

React AddItem to list in another component

I would like to use AddItem to add items to a list in another component. However, I keep getting undefined.

How do I correctly add an item to a list?

I've put it inside a CodeSandbox too: https://codesandbox.io/s/Mjjrm3zrO

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [x.movies],
    };
  }
  render() {
    return (
      <div>
        <CreateNew addItem={item => this.setState({ movie: [item].concat(this.state.movie) })} />
          {x.movies.map(movie => (
            <Result key={movie.id} result={movie} addItem={item => this.setState({ genres: [item].concat(this.state.genres) })} />
          ))}
      </div>
    );
  }
}

class CreateNew extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      genres: '',
    };
  }
  handleSubmit1 = (e, value) => {
    e.preventDefault();
    this.props.addItem(this.state.value)
    console.log(this.props.item);
  };
  onChange = e => {
    this.setState({ value: {'name': e.target.value}, genres: [{ name: 'Test', type: 1 }, { name: 'Foo', type: 10 }] });
    console.log(this.state.value);
  };
  render() {
    const { value, genres } = this.props;
    return (
      <form onSubmit={this.handleSubmit1}>
        Add a new movie
        <input onChange={this.onChange} type="text" />
        <button type="submit">Save</button>
      </form>
    );
  }
}

class Result extends React.Component {
  render() {
    const { result } = this.props;

    return (
      <div>
        <li>
          {result.name} {' '}
          ({result.genres.map(x => x.name).join(', ')}){' '}
        </li>

      </div>
    );
  }
}

Upvotes: 0

Views: 310

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Changes:

1. Instead of sending only name from child component send the whole state variable that will contain name and genres.

handleSubmit1 = (e, value) => {
    e.preventDefault();
    this.props.addItem(this.state)
};

2. You are storing the initial value movies from json to state variable so use that state variable to create the ui, because you are updating the state variable once you adding any new item, so if you use initial json to create ui then new item will not reflect in ui.

{this.state.movies.map(movie => (
    <Result key={movie.id} result={movie} />
))}

3. Update the state variable movies like this:

<CreateNew addItem={item => this.setState({ movies: [{name: item.value.name, genres: item.genres}].concat(this.state.movies) })} />

Check the working solution: https://codesandbox.io/s/3nD0RgRp

Upvotes: 1

Related Questions