import './App.css'; import GoalBox from './Components/GoalBox'; import { useState, useEffect, useRef } from 'react'; function App() { const [value, setValue] = useState('') const inputReset = useRef(null) let arr = []; const submitValue = () => { const todoList = { 'todo': value } console.log(todoList); inputReset.current.value = ''; // resets input field arr.push(todoList) console.log('todo array', arr) } return ( <div className="App"> <h1>List of things to do</h1> <input ref={inputReset} onChange={(e) => setValue(e.target.value)} /> <button onClick={submitValue}>Add New To do</button> </div> ); } export default App; Así que tengo un componente funcional aquí, y tengo useState configurando el valor de 'valor' en cada clic de botón. Eso funciona. Lo que no funciona es obtener más de un valor en mi matriz. Lo he intentado de muchas maneras, más de las que quiero enumerar...
Quiero una serie de, digamos, 7 elementos de cosas que hacer, que luego pasaré como accesorios y haré que ESE componente agregue el DOM con una nueva tarjeta que indique los elementos pendientes... directamente después del envío de entrada...
En Vanilla JS lo logré simplemente usando document.createElement('div').innerHTML = <p>${input.value}</p> (resumido) Pero no puedo entender cómo hacer esto en reaccionar. .Cualquier ayuda, incluyendo principalmente donde estoy malinterpretando el uso de React, ¡sería genial!
Solo se volverá a renderizar cuando cambie el estado de un componente.
En lugar de usar variables locales ( let arr = []; ), debería ser otro enlace de estado de reacción como:
const [arr, setArr] = useState([]);Luego puede agregar nuevos todos como se muestra a continuación:
setArr((prevArr) => [...prevArr, todoItem]); function App() { const [value, setValue] = React.useState(""); const inputReset = React.useRef(null); const [arr, setArr] = React.useState([]); const submitValue = () => { const todoItem = { todo: value }; setArr((prevArr) => [...prevArr, todoItem]); inputReset.current.value = ""; // resets input field }; return ( <div className="App"> <h1>List of things to do</h1> <input ref={inputReset} onChange={(e) => setValue(e.target.value)} /> <button onClick={submitValue}>Add New To do</button> {arr.map(({ todo }) => ( <div key={todo}>{todo}</div> ))} </div> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>Puede realizar dicha tarea utilizando el estado React:
import './App.css'; import { useState } from 'react'; function App() { const [value, setValue] = useState('') const [arr, setArr] = useState([]); const submitValue = () => { setValue(""); // resets input field setArr([...arr, { todo: value }]); // Use shallow copy to give a new ref } return ( <div className="App"> <h1>List of things to do</h1> <input value={value} onChange={(e) => setValue(e.target.value)} /> <button onClick={submitValue}>Add New To do</button> {arr.map(({todo}) => <p key={todo}>{todo}</p>)} </div> ); } export default App;