I have the following code in React and I have no idea why it doesn't work. Basically I want it to add an instance of my component whenever the button is clicked.
addList = () => {
return <List />
}
render() {
return (
<div>
<button onClick={ this.addList }>Add new list</button>
</div>
);
}
The issue is that your addList function isn't rendering anything. Try setting state in your function and using the state to determine what to render in your render function.
Try this instead:
addList = () => {
this.setState({
showList: true,
});
}
render() {
const renderedList = this.state.showList === true ? <List /> : null;
return (
<div>
<button onClick={ this.addList }>Add new list</button>
{renderedList}
</div>
);
}