Estoy tratando de averiguar por qué el accesorio que quiero pasar no funcionará con la función de alternar:
function custToggle({e}){ e.custOrFalse= !e.custOrFalse; var custButton='cust page' if ( e.custOrFalse==true ) { custButton='cust login' }; return custButton } const Navbar = ({...props},{children}) => { //can set this navbar to be cust based or not var custButton='cust page' if ( props.custOrFalse==true ) { custButton='cust login' }; const [grid, makeGrid] = useState(false); //whatever is inside the parenthesis is the starting value const [publish, makePublish] = useState(false); const [research, makeResearch] = useState(false); return ( <div> <nav className = {`${styles.page__menu} ${styles.page__custom_settings} ${styles.menu}`} > <ul className = {`${styles.menu__list} ${styles.r_list}`} > <CustomNavButtonLeft navButton='the grid' onClick='' /> <CustomNavButtonLeft navButton='publish' onClick='' /> <CustomNavButtonLeft navButton='research' onClick='' /> <CustomNavButtonRight navButton={custButton} onClick={(e)=>{custToggle(e)}} /> </ul> </nav> </div> ); }; export default Navbar; también probé onClick={custToggle(custOrFalse)}
y onclick={custToggle(this.custOrFalse)}
y onclick={custToggle(props.custOrFalse)}
entonces, claramente me estoy perdiendo el concepto aquí.
también probé esto:
const [custOrFalse, makeCustToggle] = useState(props.custOrFalse); function CustomerToggle(){ makeCustToggle(!props.custOrFalse); } <CustomNavButtonRight navButton={custButton} onClick={CustomerToggle} />lo que me gustaría hacer es volver a renderizar el botón, y que el texto cambie de 'página personalizada' a 'inicio de sesión personalizado', así como poder renderizar más tarde un componente dependiendo del estado en el que se encuentre el botón .
Dado que useState es una función asíncrona, intentar invertir o actualizar el valor en función del valor existente no funcionará de inmediato. En su lugar, debe aceptar un argumento que se garantice que es el valor actualizado anterior y realizar cambios en él.
const [custOrFalse, makeCustToggle] = useState(props.custOrFalse); function CustomerToggle(){ makeCustToggle(prevVal=>!prevVal); } <CustomNavButtonRight navButton={custButton} onClick={CustomerToggle} />En total, su componente debería verse así:
const Navbar = ({...props},{children}) => { //can set this navbar to be cust based or not const [custOrFalse, makeCustToggle] = useState(props.custOrFalse); function CustomerToggle(){ makeCustToggle(prevVal=>!prevVal); } var custButton='cust page' if (custOrFalse===true ) { custButton='cust login' }; const [grid, makeGrid] = useState(false); //whatever is inside the parenthesis is the starting value const [publish, makePublish] = useState(false); const [research, makeResearch] = useState(false); return ( <div> <nav className = {`${styles.page__menu} ${styles.page__custom_settings} ${styles.menu}`} > <ul className = {`${styles.menu__list} ${styles.r_list}`} > <CustomNavButtonLeft navButton='the grid' onClick='' /> <CustomNavButtonLeft navButton='publish' onClick='' /> <CustomNavButtonLeft navButton='research' onClick='' /> <CustomNavButtonRight navButton={custButton} onClick={CustomerToggle} /> </ul> </nav> </div> ); }; export default Navbar;