Estoy tratando de entender cómo "levantar un estado" en React. A continuación, hay dos scripts, App.js y Child.js. La idea es que la etiqueta h1 lea "estado inicial" cuando se carga la página, pero cambie a "estado nuevo" cuando se haga clic en el botón. Sin embargo, actualmente, la página muestra "nuevo estado" al cargar.
¿Qué estoy haciendo mal aquí? ¿Cómo debo elevar correctamente el estado de Niño a Aplicación para que el cambio ocurra cuando se hace clic en el botón?
const App = () => { const [state_, setState_] = React.useState("starting state"); const stateHandler = (data) => { setState_(data); }; return ( <div className="App"> {<Child propAttribute={state_} onClick={stateHandler} />} </div> ); }; const Child = (props) => { const buttonHandler = (event) => { props.onClick("new state"); }; return ( <div> <h1>{props.propAttribute}</h1> <button onClick={buttonHandler}>Button</button> </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>Idealmente, su componente secundario debería ser lo más tonto posible. No debe tener su propio estado: el padre debe otorgarle el estado en sus accesorios. El "estado de elevación" está documentado aquí .
En este ejemplo actualizado, paso una matriz de texto al componente principal, lo agrego al estado y luego uso un nuevo count de estado para verificar qué debería mostrar el componente secundario.
function App({ data }) { // Set the states const [text, setText] = React.useState(data); const [count, setCount] = React.useState(0); // Work out whether we need to update the state function handleClick(data) { if (count < text.length - 1) { setCount(prev => ++prev); } } // Render the child with the text, and the handler return ( <div className="App"> <Child text={text[count]} handleClick={handleClick} /> </div> ); }; // And all the child component accepts is the text // and the handler - it has no state - it's all dealt // with by the parent component function Child({ text, handleClick }) { return ( <div> <h1>{text}</h1> <button onClick={handleClick}>Button</button> </div> ); }; const data = ['Starting state', 'Next state']; ReactDOM.render(<App data={data} />, 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>