Как добавить несколько элементов в массив под одним id?

Question

[szzlep]

Для примера: дана форма с "input' и "textarea", как поместить их значения в массив под одним id? И можно ли использовать "input" как id?

addItem = (e) => {
        e.preventDefault();
        const{ inputText, textareaText } = this.state;
        this.setState({
            items: [],
            inputText: '',
            textareaText: '',

        })
        this.state.items.push( inputText, textareaText );
        this.setState ({ items: this.state.items });
    }
    render(){
        const { inputText, textareaText } = this.state;
        const list = this.state.items.map(({ id, value, title }) => {
            return <li key={id} value={ value }>{ title }</li>;
        })

Comments

[Александр Черемхин]

как поместить их значения в массив под одним id? И можно ли использовать "input" как id?

вот что вы хотите узнать ? Напишите внятно.

[historydev]

Как понять "под одним id"? Выражайте мысли внятней.

[szzlep]

лучше наверно так: где я тут накосячил?
должно сохраняться "input" как заголовок и "textarea" как текст

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

    handleChange(event) {
        this.setState({value: event.target.value});
    }
    handleChange1(event) {
        this.setState({value1: event.target.value});
    }

    //Добавляем в конец списка новый пункт:
    addItem(event) {
        this.setState({
            value: '',
            value1: '',
        })
        //Добавляем новый элемент в массив:
        this.state.items.push(this.state.value, this.state.value1);

        //Применяем изменение:
        this.setState({items: this.state.items});

        //Отменяем отправку формы:
        event.preventDefault();
    }


    render() {

        const list = this.state.items.map(( index, item, item1) =>
            <Box key={index} value={item}>{item1}</Box>
        );
        return (
            <div>
                <form>
                    <input
                        value={this.state.value} name='value'
                        onChange={this.handleChange.bind(this)}
                    />
                    <input
                        value={this.state.value1} name='value1'
                        onChange={this.handleChange1.bind(this)}
                    />
                    <button onClick={this.addItem.bind(this)}>Add</button>
                </form>
                <div>
                    {list}
                </div>
            </div>
        );
    }


const Box = (props) => {
    const {title, text} = props;
    return(
        <div className='box'>
            <h1>{title}</h1>
            <p>{text}</p>
        </div>
    )
}