Add element text - reactjs

Question

I am trying to do to do list. Onclick I want to add tag p with value from input, but it gives me error. I want to do like this:
I have array in state with name items, onclick I add value from input to my item array, then in return I make map function which return tag p with text value. What I am doing wrong?
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {text: '', items: []};
this.handleChange = this.handleChange.bind(this);
this.showValue = this.showValue.bind(this);
}
handleChange(event) {
this.setState({text: event.target.value});
}
showValue() {
var newItem = {
text: this.state.text
};
this.setState({
items: this.state.items.concat(newItem)
})
}
render() {
return (
<div>
<input type="text" value={this.state.text} onChange={this.handleChange} />
<button onClick={this.showValue}>Add</button>
{this.state.items.map(function() {
<p>{this.state.text}</p>
})}
</div>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

In your example, you're using your state inside the mapping function, which is not what you want to do. Instead, you want to map every item inside the state, that's why you begin that part of the code with this.state.items.map.
In your map function, you get your individual items, so you can actually use your item that you added before to your state and get the text by doing {item.text}.
You need to make sure you're actually returning the <p> too inside your map function, like:
{
this.state.items.map(function(item) {
return <p>{item.text}</p>;
})
}
Working code here: