How to add a new component with each input? - reactjs

Question

I have a form. When I enter something there and click on "submit", I want my app to add a new component which must include this one input everytime when I click on "submit".
export default class AddForm extends Component{
constructor(props){
super(props);
this.state = {
input: '',
obj: [],
}
this.onHandleChange = this.onHandleChange.bind(this);
this.onHandleSubmit = this.onHandleSubmit.bind(this);
}
onHandleChange(e){
this.setState({
input: e.target.value
});
}
onHandleSubmit(){
this.state.obj.push(this.state.input);
this.setState({
input: ''
})
}
render(){
return(
<div className = 'adder'>
<h1 className = 'header'>Enter the type of tasks you need to be done:</h1>
<div>
<form>
<input className = 'board-add' onSubmit = {this.onHandleSubmit} onChange = {this.onHandleChange} type = 'search' name = 'textarea' placeholder = 'How shall we call the board?'/>
<p><button className = 'cancel'>CANCEL</button>
<button onClick = {this.onHandleSubmit} className = 'create'>CREATE</button></p>
</form>
</div>
{this.state.obj.map((item) => <TaskBoard taskType = {item} />)}
</div>
);
}
}
<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>

Answer 1

this.state.obj.push(this.state.input);
^ This is not good practice in React. instead do this
obj: [...this.state.obj, this.state.input],
For more information on ... stuff check out the link below
https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab
also
You did not have a value prop on the input field, thus you wont be able to reset the field after submit is executed.
<input
className="board-add"
onSubmit={this.onHandleSubmit}
onChange={this.onHandleChange}
type="search"
name="textarea"
value={this.state.input}
placeholder="How shall we call the board?"
/>
codesandbox
https://codesandbox.io/s/adoring-elbakyan-69hth?file=/src/App.js:0-1459
Hope this answers your question.
AddForm.js
import React from "react";
import "./styles.css";
import TaskBoard from "./Taskboard";
export default class Addform extends React.Component {
constructor(props) {
super(props);
this.state = {
input: "",
arr: []
};
this.onHandleChange = this.onHandleChange.bind(this);
this.onHandleSubmit = this.onHandleSubmit.bind(this);
}
onHandleChange(e) {
this.setState({
input: e.target.value
});
}
onHandleSubmit(e) {
e.preventDefault();
this.setState({
arr: [...this.state.arr, this.state.input],
input: ""
});
}
render() {
console.log(this.state.arr);
return (
<div className="adder">
<h1 className="header">Enter the type of tasks you need to be done:</h1>
<div>
<form>
<input
className="board-add"
onSubmit={this.onHandleSubmit}
onChange={this.onHandleChange}
type="search"
name="textarea"
value={this.state.input}
placeholder="How shall we call the board?"
/>
<p>
<button className="cancel">CANCEL</button>
<button onClick={this.onHandleSubmit} className="create">
CREATE
</button>
</p>
</form>
</div>
{this.state.arr.map(item => (
<TaskBoard taskType={item} />
))}
</div>
);
}
}
Taskboard.js
import React from "react";
export default function TaskBoard(props) {
return <div style={{ color: "tomato" }}> {props.taskType}</div>;
}