Conditional rendering of multiple elements

user_15546255 0
Viewed 642

I want ro render 3 additional buttons if the current user is the user that created the group i'm in at the moment, so i tried someting like this :

render(){
        let adminButtons;
        if (this.state.groupData && this.props.user.id){
            if(this.state.groupData.owner === this.props.user.id){
                adminButtons = {
                    <CustomButton>Add Quiz</CustomButton>
                    <CustomButton>Drafts</CustomButton>
                    <CustomButton>Delete Group</CustomButton> };
            }
            else{
                adminButtons = <div/>;
            }
            }
        }
    return(
        <div className='group-page'>
            <div className='group-controls'>

                <div className='admin-buttons'>
                    {adminButtons}
                </div>   
            </div>

        </div>
    )}

But this implementation raises a compiler error , how could i change up the code in order to make it work? JSX experssion must have one parent element , is the error i'm getting

reactjs javascript
4 Answers

The short answer is you can wrap your components in a React.Fragment.

 <>
  <CustomButton>Add Quiz</CustomButton>
  <CustomButton>Drafts</CustomButton>
  <CustomButton>Delete Group</CustomButton>
</>

As per the docs:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

user_54021690

here you need minor change

adminButtons = {
                    <CustomButton>Add Quiz</CustomButton>
                    <CustomButton>Drafts</CustomButton>
                    <CustomButton>Delete Group</CustomButton> };
            }

to

adminButtons = [
                    <CustomButton>Add Quiz</CustomButton>
                    <CustomButton>Drafts</CustomButton>
                    <CustomButton>Delete Group</CustomButton> };
            ]

Ideally JSX need either string, null, html/jsx elements or array of either of these. you are using object, that's why you got compile errors.

user_63259730 
render() {
  let adminButtons;
  if (this.state.groupData && this.props.user.id){
    if (this.state.groupData.owner === this.props.user.id){
      adminButtons = [
        <CustomButton>Add Quiz</CustomButton>,
        <CustomButton>Drafts</CustomButton>,
        <CustomButton>Delete Group</CustomButton> ];
    } else {
      adminButtons = <div/>;
    }
  }

  return(
    <div className='group-page'>
      <div className='group-controls'>
        <div className='admin-buttons'>
          {adminButtons}
        </div>   
      </div>      
  </div>
)}
user_10871190

use :

    let adminButtons = null;
    if (this.state.groupData && this.props.user.id){
        if(this.state.groupData.owner === this.props.user.id){
            adminButtons = <>
                <CustomButton>Add Quiz</CustomButton>
                <CustomButton>Drafts</CustomButton>
                <CustomButton>Delete Group</CustomButton> };
        </>
        }
    }

if your condition is true the three elements will be displayed, if the condition is false nothing will be rendered.

user_73835200
Related