Tengo dos componentes, un componente principal y un componente secundario. Este componente secundario está dentro del componente principal. Dentro del componente secundario, hay una etiqueta que, cuando se hace clic en ella, se almacena un valor en un estado separado. Ahora, cuando se hace clic en un botón dentro del componente principal, se debe imprimir el valor que se almacenó dentro de un estado en el componente secundario. a la consola
Lo que tengo aquí abajo
// import Checboxtest from "./Checkboxtest"; import "./styles.css"; const Child = ({ showresult, click }) => { const [clickedvalue, setClickedValue] = useState(""); const ItemClicked = (e) => { setClickedValue("Yes"); console.log(clickedvalue); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={ItemClicked}> <input type="checkbox" /> clik me </span> </div> ); }; export default function Parent() { const [clickedvalue, setClickedValue] = useState(""); return ( <div className="App"> <h1> When clicked on the button below, the value of the checkbox inside the child component should be display on the console. </h1> <button onCick={() => { console.log(clickedvalue); }} > See checkbox value </button> <Child clickedvalue={clickedvalue} setClickedValue={setClickedValue} /> </div> ); }Esto se conoce como levantar el estado. El estado de clickedValue debe estar en el componente principal, luego debe pasarse al componente <Child clickedValue={clickedValue}/> . Y como la función onClick, en este caso, está en el componente secundario, también debe pasar el método setter <Child clickedValue={clickedValue} setclickedvalue={setclickedvalue}/> .
Edición n. ° 1: después de mirar el código, hubo varios problemas menores que vi como en el onClick estaba mal escrito como onCiked
Aquí está el código de trabajo modificado
const Child = ({clickedvalue, showresult, setClickedValue }) => { const ItemClicked = (e) => { setClickedValue(e.target.checked); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={ItemClicked}> <input type="checkbox" value={clickedvalue}/> clik me </span> </div> ); }; const Parent = () => { const [clickedvalue, setClickedValue] = useState(false); return ( <div className="App"> <h1> When clicked on the button below, the value of the checkbox inside the child component should be display on the console. </h1> <button onClick={()=>{console.log(clickedvalue)}}>See checkbox value</button> <Child clickedvalue={clickedvalue} setClickedValue = {setClickedValue}/> </div> ); }```debe levantar el estado del componente Child de la siguiente manera:
const Child = ({ showresult, setClickedValue }) => { const ItemClicked = (e) => { setclickedvalue("Yes"); console.log(clickedvalue); }; return ( <div className="App"> <h1>Checkbox Value </h1> <span onClick={ItemClicked}> <input type="checkbox" /> clik me </span> </div> ); }; export default function Parent() { const [clickedvalue, setclickedvalue] = useState(""); return ( <div className="App"> <h1> When clicked on the button below, the value of the checkbox inside the child component should be display on the console. </h1> <button onCick={()=>{console.log(clickedvalue)}}>See checkbox value</button> <Child setClickedValue = {setClickedValue}/> </div> ); }