Obtengo números del campo de entrada y los represento debajo del campo de entrada uno por uno con el clic del botón. Entonces, quiero saber cómo puedo revertir un texto para un elemento en particular en el que se hizo clic de la lista.
Gracias.
import { useState } from "react"; import "./styles.css"; const App = () => { const [text, setText] = useState(""); const [data, setData] = useState([]); const handleSubmit = (e) => { e.preventDefault(); setData([...data, text]); setText(""); }; const reverseNumber = (e, each) => { return each.split('').reverse().join('') } return ( <div> <form onSubmit={handleSubmit}> <input placeholder="magic..." value={text} onChange={(e) => setText(e.target.value)} type="number" /> <button disabled={!text} type="submit"> Add </button> </form> <div className="content"> {data.length > 0 && data.map((each, index) => { return <h3 key={index} onClick={e => reverseNumber(e, each)} >{each} </h3>; })} </div> </div> ); }; export default App;Oye, quieres hacer algo como esto para que sea más fácil.
import { useState } from "react"; import "./styles.css"; const App = () => { const [text, setText] = useState(""); const [data, setData] = useState([]); const handleSubmit = (e) => { e.preventDefault(); setData([...data, text]); setText(""); }; const reverseNumber = (index, item) => { item = item.split('').reverse().join('') let neWData = [...data]; newData[index] = item; setData(newData) } return ( <div> <form onSubmit={handleSubmit}> <input placeholder="magic..." value={text} onChange={(e) => setText(e.target.value)} type="number" /> <button disabled={!text} type="submit"> Add </button> </form> <div className="content"> {data.length > 0 && data.map((each, index) => { return <h3 key={index} onClick={e => reverseNumber(index, each)} >{each} </h3>; })} </div> </div> ); }; export default App;