Conditional render 1 of 3 components on button click (react)

Question

I'm new to react and been struggling to figure out how to render the components inside the container depending on which button has been clicked.

I've set the state to false, then on the button click set it to true then used a ternary operator to show or set the component to null but won't work when the next button is clicked because the state is already set to true.

any help in the right direction would be appreciated :)

const AboutUs = () => {

  const [VisDetails, setVisDetails] = useState(false);

  return (

<Button>Personal Details</Button>
<Button>Bio</Button>
<Button>Qualifications</Button>

Container className={classes.container}>

<PersonalDetails />
<ProfileBio />
<ProfileQualifications />

</Container>

  );
};

Philipp Kyeck · Accepted Answer · 2025-01-17 08:16:19Z

3

I think the best thing to do in this case is save the state depending on what content should be showing and then update that state on button click.

Something like this

const AboutUs = () => {
  const [selected, setSelected] = useState(null); //Here goes the default value you want to show, or null if you want no render

  return (
    <>
      <Button
        onClick={() => {
          setSelected("personaldetails");
        }}
      >
        Personal Details
      </Button>
      <Button
        onClick={() => {
          setSelected("bio");
        }}
      >
        Bio
      </Button>
      <Button
        onClick={() => {
          setSelected("qualif");
        }}
      >
        Qualifications
      </Button>

      <Container className={classes.container}>
        {selected == "personaldetails" ? <PersonalDetails /> : null}
        {selected == "bio" ? <ProfileBio /> : null}
        {selected == "qualif" ? <ProfileQualifications /> : null}
      </Container>
    </>
  );
};

You could use a switch() but I like the inline if statement, easier to read.

edited Jan 17 at 8:16

Philipp Kyeck

18.9k19 gold badges90 silver badges126 bronze badges

answered May 21, 2021 at 22:38

ByteVictor

1891 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

onClick expects a function

ByteVictor Over a year ago

Oh, you're right, so you have to define a handler for each onClick, sometimes React is a bit messy. Ill change the answer.

brendan Over a year ago

Thank you this worked great. are there any advantages or disadvantages to using either ?

ByteVictor Over a year ago

There is no significative advantage between switch and inline evaluation, i like the inline because is easier to read. I will modify the answer there is a cleaner way without the handlers. Please, tick the answer if it answered your question correctly :)

Community · Accepted Answer · 2025-01-17 12:24:33Z

Based on the button click selected state receive the value which will be used in showSelectedOption() to return the right component.

const AboutUs = () => {
  const [selected, setSelected] = useState('');

  const showSelectedOption = () => {
    switch(selected) {
      case 'details':
        return  <PersonalDetails />;
      case 'bio':
        return  <ProfileBio />;
      case 'qualif':
        return  <ProfileQualifications />;
      default:
        return '';
    }
  }

  return (
    <Button onClick={() => setSelected('details')}>Personal Details</Button>
    <Button onClick={() => setSelected('bio')}>Bio</Button>
    <Button onClick={() => setSelected('qualif')}>Qualifications</Button>

    <Container className={classes.container}>
      {showSelectedOption()} 
    </Container>
  );
};

Collectives™ on Stack Overflow

Conditional render 1 of 3 components on button click (react)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related