así que actualmente tengo un componente de encabezado en mi sitio web de react js y quiero establecer el título en un elemento de una matriz, pero parece que no puedo entender cómo. aquí está mi código
import Header from './components/Header'; var shoppinglist = [] var currentitem = "" const App = () => { function getData(val){ console.warn(val.target.value) currentitem = val.target.value; } function logData() { shoppinglist.push(currentitem) console.log(shoppinglist) } function deleteItem() { shoppinglist.pop() console.log(shoppinglist) console.log(shoppinglist[0]) } return ( <div className="Container"> <Header title = "grocery list" /> <input type="text" onChange={getData}></input> <button onClick={logData}>add item to list</button> <button onClick={deleteItem}>delete item</button> <div className="listItems"> <Header title = {shoppinglist[0]} /> </div> </div> ); } export default App;¿Cómo configuraría el título del encabezado en la lista de compras [0]?
Debe tener el estado React para representar su contenido, en el título de su caso. Puedes leer más en react.js
Una forma de lograr lo que pidió en cuestión: https://codesandbox.io/s/competent-wildflower-uvusd?file=/App.js
import "./styles.css"; import React from "react"; export default function App() { const [title, setTitle] = React.useState(null); const [input, setInput] = React.useState(null); function getData(val) { console.warn(val.target.value); setInput(val.target.value); } function deleteItem() { setTitle(null); } return ( <div className="Container"> <input type="text" onChange={getData}></input> <button onClick={() => setTitle(input)}>add item to list</button> <button onClick={deleteItem}>delete item</button> {title && ( <div> <p>{title}</p> </div> )} </div> ); }Si desea un componente dinámico en reacción, debe usar variables de estado. De lo contrario, React no vuelve a procesar su código. Esto podría verse así con React Hooks:
import Header from './components/Header'; var currentitem = "" const App = () => { const [shoppinglist, setShoppinglist] = useState([]); function getData(val){ console.warn(val.target.value) currentitem = val.target.value; } function addItem() { shoppinglist.push(currentitem) setShoppinglist([...shoppinglist]) } function deleteItem() { shoppinglist.pop() setShoppinglist([...shoppinglist]) } return ( <div className="Container"> <Header title = "grocery list" /> <input type="text" onChange={getData}></input> <button onClick={addItem}>add item to list</button> <button onClick={deleteItem}>delete item</button> <div className="listItems"> <Header title = {shoppinglist[0]} /> </div> </div> ); } export default App;