I want to make a situation whereby if i click the back button, it reverses the whole function-CodePudding

The code

const DEFAULT_IS_CLICKED = false;
function RightBody() {
  const [isClickedYes, setIsClickedYes] = React.useState(DEFAULT_IS_CLICKED);

  const onClickYes = () => {
    setIsClickedYes(true);
  };

  return (
    <Card>
      <SmallCircle />
      <Div>
        <CardContent number={"1."} title={"Course of study in school:"} />
        <CardContent number={"2."} title={"Are you a student?"} />
        <div>
//comment : i want when i click on the ReturnBtn some lines below this, it reverses the whole is clicked and i cant seem to figure it out
          {isClickedYes ? (
            <InputCont>
              <TickImg src={ticked} />
              <Tick>Yes</Tick>
              <Input1 name="text" placeholder="course studied in school" />
              <Input2
                type="text"
                onFocus={(e) => {
                  e.currentTarget.type = "date";
                  e.currentTarget.focus();
                }}
                placeholder="Expected graduation date"
              />
              <ReturnBtn src={back} />
            </InputCont>
          ) : (
            <Button1 onClickYes={onClickYes} />
          )}
        </div>
        <Sec1>
          <CardContent number={"3."} title={"Did you graduate?"} />
          <Button2 />
        </Sec1>
        <Sec2>
          <CardContent number={"4."} title={"Did you graduate?"} />
          <Button3 />
        </Sec2>
      </Div>
    </Card>
  );
}

export default RightBody;

i want to do a function that when i click on the ReturnBtn it brings me back to this where i had just two bbuttons, please help

function Button1({ onClickYes }) {
  return (
    <div className="buttons">
      <button onClick={onClickYes}>yes</button>
      <button>No</button>
    </div>
  );
}

the original default mode of the code is two buttons, Yes and No but when i click on yes then it >takes me to where i ve that input field and then the return icon(ReturnBtn). My aim is that >whenever the ReturnBtn is clicked, it does like a reverse and takes me back to the default state >where my two buttons, Yes and No comes bac

CodePudding user response：

I imagine the code for ReturnBtn looks like this:

function ReturnBtn({src}) {
    return (
        <button>Text Goes Here</button>
    )
}

You should make it modify the same state that initially makes the buttons disappear. So add the following function in RightBody.

function RightBody() {
    const [isClickedYes, setIsClickedYes] = React.useState(DEFAULT_IS_CLICKED);

    const onClickYes = () => {
        setIsClickedYes(true);
    };

    const onClickReturn = () => {
        setIsClickedYes(false);
    }

    ...

    return (
        ...
        <ReturnBtn src={back} onClick={onClickReturn} />
        ...
    )
}

Then don't forget to attach the on click handler to the button itself inside of ReturnBtn

function ReturnBtn({src, onClick}) {
    return (
        <button onClick={onClick}>Text Goes Here</button>
    )
}

At this point, I would also update setIsClickedYes to have a more descriptive name.

CodePudding user response：

use the NOT operator for your onClickYes function, that should help you toggle the state mode

const onClickYes = () => { setIsClickedYes(!isClickedYes) }