Добавить элемент на странице

Чтобы добавить элемент на страницу, его надо добавить в объект (при добавлении элемента в объект, он автоматически добавится в HTML-код).

Для примера будет создано текстовое поле, через которое можно будет добавить элемент на странице через атрибут onSubmit.

render() {
    return (
        <div className="react-app">
            <ul>
                {this.state.items.map(item => (
                    <li>{item.name}</li>
                ))}
            </ul>
            <form onSubmit={this.handleSubmit}>
                <p><input type="text" id="test" /></p>
                <p><input type="submit" value="Добавить" /></p>
            </form>
        </div>
    );
}

И код метода handleSubmit().

class Items extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {items: []};
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    handleSubmit(e) {
        e.preventDefault();
        const newItem = {
            name: document.getElementById("test").value
        };
        this.setState(state => ({
          items: state.items.concat(newItem)
        }));
    }

    render() { /* код */ }
}

Пример кода на JSFiddle