Hola soy nuevo en React y quiero realizar un "To Do List" sencillo, para ello cuento con un input text y un boton. La idea es que cuando escriba en el input, de click al boton y este muestre una tarjeta la cual contendrá lo que recientemente se escribió y así sucesivamente se vayan generando más tarjetas.
Hasta el momento unicamente tengo guardado lo que escribe el usuario en el input text, quisiera saber como puedo mandar a llamar un componente (que es la tarjeta) por medio del boton. Cabe señalar que estoy usando una class App y mi función componente que quiero mandar a llamar esta fuera de la clase.
Si hay algo que no tiene sentido se aceptan sugerencias y de todo, gracias :)
Esto es lo que tengo:
import React, {useState, Component} from 'react';
import './App.css';
import {Container, FormControl, InputLabel, Input, Button} from '@material-ui/core';
function toDo(props) {
return <div>
<p> To Do </p>
<p> Description: {props.name}</p>
</div>;
}
class App extends Component {
state = { task: "", };
valueToState = (target) => {
this.setState( () => {
return { [target.name]: target.value};
});
};
render(){
return(
<div>
<div>
<p>To Do List</p>
</div>
<div>
<FormControl>
<InputLabel>New task</InputLabel>
<Input
onChange={event => this.valueToState(event.target)}
name = "task"
type = "text"/>
</FormControl>
<Button
onClick = {toDo(this.state.task)}
variant="contained"
color="primary">
Add
</Button>
</div>
</div>
);
}
};
export default App;