React multiple layout to choose from based on fetch data result-CodePudding

I'm new to react, I am implementing a multiple layout based on the fetch data result coming from the cms platform. let's say in my cms I have a field called Layout and I fetch this as a result. Then, I changed the layout based on that. My implementation works fine but is there another way or correct way of doing this?

The code below decides which layout to use depending on the result. if layout result is equals to "Layout 1" then I will use Layout 1 design and so on for Layout 2 and Layout 3, each has their own design done in css tailwind.

my code:

{singleProjectData.layout !== null
        ? 
        <div>
            {singleProjectData.layout === 'Layout 1' ?
              <div className="myCssDesignForDesign1">
                <h1>Use design 1</h1>
                <div>{singleProjectData.title}</div>
              </div>
              : 
              singleProjectData.layout === 'Layout 2' ? 
                <div className="myCssDesignForDesign2">
                 <h1>Use design 2</h1>
                 <div>{singleProjectData.title}</div>
                </div>
              : 
              <div className="myCssDesignForDesign3">
                <h1>Use design 2</h1>
                <div>{singleProjectData.title}</div>
              </div>
            }
        </div>
        : 
        <div>
          No layout data result.
        </div>
  }

CodePudding user response：

You can also use this approach

{singleProjectData.layout !== null && 
        <div>
            {singleProjectData.layout === 'Layout 1' &&
              <div className="myCssDesignForDesign1">
                <h1>Use design 1</h1>
                <div>{singleProjectData.title}</div>
              </div>
              }
              {singleProjectData.layout === 'Layout 2' &&
                <div className="myCssDesignForDesign2">
                 <h1>Use design 2</h1>
                 <div>{singleProjectData.title}</div>
                </div>
              }
              { (singleProjectData.layout !== 'Layout 1' && 
                 singleProjectData.layout !== 'Layout 2') &&
                <div className="myCssDesignForDesign3">
                  <h1>Use design 2</h1>
                  <div>{singleProjectData.title}</div>
                </div>
              }
               
            }
        </div>
}
{singleProjectData.layout === null &&
        <div>
          No layout data result.
        </div>
}

CodePudding user response：

This cleans up the code a bit. If we extend it to more layout, chained checks will become an issue. React Lazy is also interesting to fragment the code and not need to import all layouts.

React Lazy

import React from 'react'

// layouts.js
const Layout1=({...props})=>{
   return (
       <div>
           Design 1
       </div>
    )
}

const Layout2=({...pros})=>{
    return (
        <div>
            {pros.name}
        </div>
    )
}

export function getLayout(layout){
    const layouts = {
        "Layout1":Layout1,
        "Layout2":Layout2,
        "default":Layout1
    }
    return layouts[layout]?layouts[layout]:layouts["default"]
}


//main.js
const Main=()=>{

    const data = {layout:"Layout2",name:"Design is 2"}
    // const data = {layout:null,name:"Default"} // Default Layout → Layout 1
    const Layout = getLayout(data.layout)
    return (
        <Layout {...data}/>
    )
}

export default Main