how do i change state on this navbar

Question

i'm trying to figure out why the prop i want to pass won't work with the toggle function:

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;

i also tried onClick={custToggle(custOrFalse)}

and onclick={custToggle(this.custOrFalse)}

and onclick={custToggle(props.custOrFalse)}

so, clearly i'm missing the concept here.

also tried this:

const [custOrFalse, makeCustToggle] = useState(props.custOrFalse);

  function CustomerToggle(){
    makeCustToggle(!props.custOrFalse);
  }

<CustomNavButtonRight navButton={custButton}  onClick={CustomerToggle}  />

what i'd like to do is just have the button rerender - and for the text to change from 'cust page' to 'cust login' -- as well as be able to later render a component depending on which state the button is in.

Answer 1

Since useState is an async function, trying to invert or update the value based on existing value won't work straight away. You should instead accept an argument that is guaranteed to be the previous updated value and make changes to it.

const [custOrFalse, makeCustToggle] = useState(props.custOrFalse);

  function CustomerToggle(){
    makeCustToggle(prevVal=>!prevVal);
  }

<CustomNavButtonRight navButton={custButton}  onClick={CustomerToggle}  />

Altogether, your component should look something like this:

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;