How to change my useState variable value from a component to another?-CodePudding

I have select component with a variable ´ulState´. When this variable is 'false', it indicates that my select is open and when is 'true', its closed. I need to change the value of this variable when a person click on an determined container but i dont know how to do it.

This is the div that when clicked, need to change my variable value (in other words, close my select.)

return(
    <DivElem onClick={() => console.log("Click here")}>
      <div className="container">
        <Row>
          <Col md={4} className="column">
            <h2 className={`toBlur ${toBlur.toString()}`}>
              Lorem Ipsum
            </h2>
            <Form
              toBlur={toBlur}
              setToBlur={setToBlur}
            />
          </Col>
        </Row>
      </div>
    </DivElem>
  )

This is my 'Select' component inside my 'Form' component

<SelectElement>
      <div className={`${props.theme ?? ''}field${!touched && props.mensagemValidacao !== undefined ? 'errorclass' : ''} ${props.disabled === true ? 'disabled' : ''}`}>
        <ul className={`${noClick && 'noArrow'} select ${ulState ? 'active' : ''}`}>
          {noClick === false &&
          <li className="active" onClick={() => openSelect(selected)}>
            {selected}
          </li>
          }
          {noClick === true &&
          <li className="active">
            {selected}
          </li>
          }
          {props.opcoes.map((key, index) =>
            <li
              value={props.opcoes[key]}
              key={index} onClick={() => selectItem(key)}>
                {key}
            </li>
          )}
        </ul>
        <input
          type="hidden"
          id={props.id}
          {...props.register}
          />
      </div>
    </SelectElement>

CodePudding user response：

I assumed this component is the principal. You need pass the function toggleUlState and when a person clicked on it this function it'll close or open the select, and control what you wanna show with the useState called ulState.

  const [ulState, setUlState] = useState(false)
  const toggleUlState = () = > {
    setUlState(!ulState)
  }
  return (
    <DivElem onClick={() => toggleUlState()> {/*for example but i think here no is required this toggleUlState*/} 
      <div className="container">
        <Row>
          <Col md={4} className="column">
            <h2 className={`toBlur ${toBlur.toString()}`}>Lorem Ipsum</h2>
            <Form toBlur={toBlur} setToBlur={setToBlur} toggleUlState={toggleUlState} ulState={ulState} />
          </Col>
        </Row>
      </div>
    </DivElem>
  );

I dont know that is or that doing the var noClick but the better way to written that validation is:

 {!noClick && (
    <li className="active" onClick={() => openSelect(selected)}>
      {selected}
    </li>
  )}
  {noClick && <li className="active">{selected}</li>}

CodePudding user response：

The simple way is to move up the state management into the parent component (which has both the controlling button and the toggled display).

Seems similar to what you probably have done for your toBlur state.

A "cleaner", but unfortunately more verbose, solution for this use case, where the parent component does not need full control, but only to trigger an action on a child component, is to use an imperative handle: it is exposed by the Child component, and the parent references that child with a useRef.