1

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;

1 respuesta 1

1

Hay algunas cosas a tener en cuenta en tu código.

Lo primero sería acomodar el lugar de la función toDo() y meterla dentro de la clase App.

Otro detalle es sacarle la palabra function y definirla directamente como un método del componente.

El segundo punto que me gustaría cambiar, es la manera en la que estás definiendo el estado task.

Como estás trabajando con los componentes de clases de React, debería estar dentro del constructor() de la clase y también agregar el método super().

El tercer ajuste que también se le puede hacer a tu código es la manera en la que declaras el método onClick en el botón Add.

Debe ser una función que ejecute otra función, en este caso el método toDo(), y no hay que olvidar usar la palabra reservada this al llamar un método del componente.

En este caso quedaría así:

onClick={() => this.toDo(this.state.task)}

Teniendo en cuenta todas esas consideraciones, te propongo esta manera de hacer lo que buscas:

import React, { useState, Component } from "react";
import "./App.css";
import {
  Container,
  FormControl,
  InputLabel,
  Input,
  Button
} from "@material-ui/core";

class App extends Component {
  // state = { task: "" };
  constructor(props) {
    super(props);
    this.state = { toDoList: [] };
  }

  valueToState = (target) => {
    this.setState(() => {
      return { [target.name]: target.value };
    });
  };
  toDo(props) {
    console.log(props);
    let newItem = this.state.toDoList.concat(props);
    this.setState({ toDoList: newItem });
    // return <div>
    //         <p> To Do </p>
    //         <p> Description: {props.name}</p>
    //       </div>;
  }
  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={() => this.toDo(this.state.task)}
            variant="contained"
            color="primary"
          >
            Add
          </Button>
          <ul>
            {this.state.toDoList.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default App;

Edit new

Ahora analicemos un poco lo que hace este código.

Básicamente toma el valor del input, y al accionar el botón Add se lleva dicho valor a la función toDo(), y esa función guarda ese valor en el estado toDoList que es un array.

Luego se imprime en el DOM el contenido de ese array con una función .map.

  <ul>
    {this.state.toDoList.map((item) => (
      <li>{item}</li>
    ))}
  </ul>

Ejecuta todo el código en SandBox, pruébalo y mira si cumple con lo que buscabas.

PD: Te recomiendo que aprendas a usar los Hooks de React. Se usan en la últimas versiones de React y simplifican mucho el trabajo de crear componentes.

1
  • 1
    Super clara la explicación, si me sirvió de mucho, me falta practica ya iré mejorando, le agradezco mucho su tiempo :) el 8 ago. 2021 a las 3:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.