React not rendering list elements

Question

Problem

It's not showing the elements within the item. It doesn't render anything at the moment.

List.js

import React from 'react';

const List = props => (
  <div>
    {
      props.items.map((item, index) => {
      return <div key={index}>
          <h1>{item.name}</h1>

          <p>{item.term}</p>

      </div>
    })}
  </div>
);

export default List;

App.js

import React, {Component} from 'react'
import './App.css'
import List from './List';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            term: '',
            name: '',
            items: []
        };
    }

    onChange = (event) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });

    }

    onSubmit = (event) => {
        event.preventDefault();

        this.setState({
            term: '',
            name: '',
            items: [
                ...this.state.items,
                this.state.term,
                this.state.name
            ]
        });

    }

    render() {
        const { term, name, items } = this.state;
        return (
          <div>
                <form className="App" onSubmit={this.onSubmit}>
                    <input name="term" value={this.state.term} onChange={this.onChange}/>
                    <input name="name" value={this.state.name} onChange={this.onChange}/>
                    <button>Submit</button>
                </form>


              <List items={this.state.items} />

            </div>
        );
    }

}

Aamin Khan · Accepted Answer · 2018-12-22 18:22:33Z

1

Issue was in onSubmit, you need to convert to object and than add

onSubmit = event => {
    event.preventDefault();

    this.setState({
      term: "",
      name: "",
      items: [...this.state.items, { term: this.state.term, name: this.state.name}]
    });
    setTimeout(() => { console.log(this.state.items) }, 0)
  };

https://codesandbox.io/s/p7p128w7mx

answered Dec 22, 2018 at 18:22

Aamin Khan

7374 silver badges12 bronze badges

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

3 Comments

BARNOWL Over a year ago

let me give this a shot.

BARNOWL Over a year ago

This works thanks, so i just need to convert to object then add, now i see.

Aamin Khan Over a year ago

Cheers @BARNOWL:)

Collectives™ on Stack Overflow

React not rendering list elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related