1

По клику на button надо каждый раз добавлять новый <Item />

У меня не выходит создать больше одного компонента, сколько бы я не кликал на кнопку

   class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            qty: 0
        };

        this.updateQty = this.updateQty.bind(this);
        this.createItem = this.createItem.bind(this);
    }

    updateQty(item) {
        this.setState({qty: item}) // 0..1..2..3..
    }

    createItem() {

        for(let i = 0; i < this.state.qty; i++) {
            console.log(i) //always 0
            return <Item />
        }

    }

    render() {

        return (
            <div >
                <h1>ToDo List</h1>
                <Add qtyNum={this.updateQty} />
                // <Search />
                <div className="items_wrap">
                    {this.createItem()}
                </div>

            </div>
        )
    }
}

Кнопка:

   class Add extends Component {

        constructor(props) {
            super(props);
            this.state = {
                qtyEvents: 0
            }; 
        }

    render() { 

        return (
            <div > 
                <p> Add event </p>
                <input type="text" placeholder="add event"/>
                <button onClick={() => this.props.qtyNum(this.state.qtyEvents += 1)}>Добавить собитие</button>
            </div>
        )

    }
}

В Item простой блок, не стал добавлять

3 ответа 3

3

Проблема у том, что в цикле вызываете return . вот так правильно будет:

createItem() {
  return this.state.qty.map(() => <Item />)
}
-1

Решение таково:

in App

    let arr = []
    for(let i = 0; i < this.state.qty; i++) {
        arr.push(i)
    }

  ......render

    {arr.map((index) =>
        <Item key={index} />
    )}
-1

Вообще вы можете обойтись без constructor и bind. Не очень понятно зачем вы просто плюсуете события + . Из вашего когда для вас сделал пример.

App.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import Add from "./Add";
import Item from "./Item"

   class App extends Component {
        state = {
            events: [],
            idEvent:0
        }

    addEvent = eventName => {
       let {events,idEvent} =  this.state;
       events.push({name:eventName,id:idEvent + Math.random()})
       this.setState({events,idEvent: idEvent+1})
       }

    render() {
        let {events,idEvent} =  this.state;
            console.log(this.state.idEvent)

        return (
            <div >
                <h1>ToDo List</h1>
                <Add addEvent={this.addEvent} />
                <div className="items_wrap">
                {events.map(event=><Item key={event.id} title={event.name} />)}
                </div>
            </div>
        )
    }
}

Add.js

import React, { Component } from 'react';

export default class Add extends Component {
  state = {
    NameEvent: ""
  }
  InputHandler = e => this.setState({ NameEvent: e.target.value })
  render() {
    return (
      <div >
        <p> Add event </p>
        <input value={this.state.NameEvent} onChange={this.InputHandler} type="text" placeholder="add event" />
        <button onClick={() => this.props.addEvent(this.state.NameEvent)}>Добавить собитие</button>
      </div>
    )

  }
}

Item.js

import React, { Component } from 'react';
export default (props) => (
  <div >
    <h3>{props.title}</h3>
  </div>
)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.