Как создать простое приложение для создания списков в React.JS?

Question

Я работаю над простым создателем списков, чтобы создать приложение для списков с помощью create-реагировать на приложение, и у меня возникли некоторые затруднения с определением функциональности.Что я пытаюсь сделать с помощью этого приложения:

• Я хочу иметь возможность вводить текст на входе, нажимать кнопку или нажимать ввод, и любой текст будет указан наТело приложения.

• Я хочу иметь возможность создать кнопку, которая будет удалять элементы списка после завершения задачи или цели

Пока мой код разбит на эти компоненты:

Приложение, ListInput, ItemList, Item

Код для приложения

import React, { Component } from 'react';
import './App.css';
import Navigation from './components/Navigation';
import ListInput from './components/ListInput';
import ListName from './components/ListName';
import Item from './components/Item';
import ItemList from './components/ItemList';

class App extends Component {
  constructor() {
    super();
      this.state = {
        input: '',
        items: []
      };    
  }

  addItem = () => {
    this.setState(state => {
      let inputValue = this.input.current.value;
      if (inputValue !== '') {
          this.setState({
            items: [this.state.items, inputValue]
          })
      }
    })
  }


  onButtonEnter = () => {
    this.addItem();
  }

  render() {
    return (
      <div className="App">
       <Navigation />
       <ListName />
       <ListInput addItem={this.addItem}
        onButtonEnter={this.onButtonEnter} />
        <Item />
        <ItemList />
      </div>
    );
  }
}

export default App;

Код для ListInput:

import React from 'react';
import './ListInput.css';

const ListInput = ({ addItem, onButtonEnter }) =>  {

        return (
            <div>
                <p className='center f2'>
                {'Enter List Item'}
                </p>
                <div className='center'>
                    <div className='center f3 br-6 shadow-5 pa3 '>

                            <input type='text'
                            className='f4 pa2 w-70 center' 
                            placeholder='Enter Here'

                             />                       
                            <button className='w-30 grow f4 link ph3 pv2 dib white bg-black'
                            onClick={onButtonEnter}
                            onSubmit={addItem} >
                                {'Enter'}
                            </button>

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

}


export default ListInput;

Код для Item:

import React from 'react';

const Item = ({text}) =>{
    return (
        <div>
            <ul>{text}</ul>
        </div>
    )}
export default Item;

И код для ItemList:

import React from 'react';
import Item from './Item';

const ItemList = ({ items }) => {
    return (
        <div>
            {item.map(items => <Item key={item.id}
            text={item.text} />
            )}
        </div>
    )
}

export default ItemList;

В моем приложении реакции я возвращаю ошибку'item' не определен, и я запутался, почему.

Answer 1

В вашем App.js вам нужно передать элементы в качестве реквизита компоненту ItemList, например

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

Также в функции addItem нажатие inputValue в массиве элементов некорректно, сделайте что-то вроде ниже

  addItem = () => {
     this.setState(state => {
        let inputValue = this.input.current.value;
        if (inputValue !== '') {
            this.setState(prevState => ({
                items: [...prevState.items, inputValue]
            }));
         }
      })
  }

И в ItemList.js сделайте условную проверку, прежде чем делать .map также некоторые ошибки опечаток в .map

 import React from 'react';
 import Item from './Item';

  const ItemList = ({ items }) => {
      return (
          <div>
              {items && items.map(item => <Item key={item.id}
               text={item.text} />
              )}
            </div>
       )
   }

  export default ItemList;

Попробуйте с вышеуказанными изменениями Это будет работать

Пожалуйста, извините, еслиесть какие-либо опечатки, потому что я отвечаю со своего мобильного телефона

Answer 2

Похоже, у вас есть опечатка в ItemList.
Она получает items (множественное число) в качестве реквизита, но вы используете item.

const ItemList = ({ items }) => {
    return (
        <div>
            {items.map(items => <Item key={item.id}
            text={item.text} />
            )}
        </div>
    )
}

И не забудьтефактически передайте items реквизит в ItemList:

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

Answer 3

Ваш ItemList был неверен.Взгляните на исправленный фрагмент ниже, который необходимо сопоставить с элементами, а не с элементами (следовательно, элемент ошибки не определен).Кроме того, вам нужно добавить элементы в список предметов в ваш список приложений. Js

import React from 'react';
import Item from './Item';

const ItemList = ({ items }) => {
    return (
        <div>
            {items.map(item => <Item key={item.id}
            text={item.text} />
            )}
        </div>
    )
}

export default ItemList;

В файле app.js добавьте следующую строку.Кроме того, я не вижу, что делает в вашем app.js удалить его.

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