如何使用条件渲染编写干净、可读的 ReactJS 组件？

Question

The result is not showing in my window. I have created a global object for testing:

const obj = {
  onam: [
    {
      name: "name3",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg"
    },
    {
      name: "name2",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg"
    }
  ],
  christmas: [
    {
      name: "name1",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg"
    },
    {
      name: "name0",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg"
    }
  ]
}

Below is the function I am calling inside render.

const grid = (props) => {
  if (props == "All") {
    const keys = Object.keys(obj);
    // looping through keys
    keys.forEach((key, index) => { 
      // looping through array in keys
      for(let j = 0; j < Object.keys(obj).length; j++) {
        return (
          <div>
            <a><img src={obj[key][j].image}>{obj[key][j].name}</img></a>
          </div>
        )
      }
    });   
  }
}

I know there is some error in the above function but I cant sort it out. I am calling {grid("All")} inside render. My aim is to display a div containing a div with all images with a tag. I would like to learn a clean way of conditionally rendering my components.

Answer 1

There are several concerns here Ashwin.

• Your component name should begin with uppercase.
• Use an array instead of object obj . Its easier to work with arrays and loop through them than it is to loop objects.
• Don't wrap the entire component within an if statement. Its bad practice.
• props == "All" is just wrong. props is an object not a string. This is the main reason nothing is rendering. That if statement will always return false.
• <img> doesn't take children so don't pass {obj[key][j].name} into the img tag. Move that bit after the closing img tag into the <a> tag.

I'm rewriting your component with some comments to help you learn, but there are several other ways to achieve the same result, perhaps with a better approach. This works for me and I find it's more readable and easier to understand.

import React from "react"

/* An array of objects is always easier to work than objects with 
multiple arrays as values. You might end up duplicating a few keys like
"festival" in this example, but it will make your life easier.
 */

const arr = [
    {
      festival: "oman",
      name: "name3",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg",
    },
    {
      festival: "oman",
      name: "name2",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg",
    },
    {
      festival: "christmas",
      name: "name1",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg",
    },
    {
      festival: "christmas",
      name: "name0",
      image: "https://resize.hswstatic.com/w_828/gif/kelp-biofuel.jpg",
    },
]

/* 
Always make sure your components are uppercase

De-structure your props with { propName1, propName2 }
because that way you or anybody else looking at your
component immediately can recognize what props are being
passed.
*/
const Grid = ({ whatToRender }) => {
  /*  
  Create a custom render function inside your component if
  you need to render conditionally. Its easier to work with
  debug and maintain. 
  */
  const renderGrid = () => {
    if (whatToRender === "all") { // use === over == because that will check for type equality as well.
      return arr.map((item) => ( // () is equivalent to return () when looping.
        /* Always pass a unique key if you are creating lists or lopping */
        <div key={item.image}> 
          <a>
            <img src={item.image} alt={item.name} />
            {item.name}
          </a>
        </div>
      ))
    }
    if (whatToRender === "onam") {
      return arr.map((item) => {
        if (item.festival === "onam") {
          return (
            <div key={item.image}>
              <a>
                <img src={item.image} alt={item.name} />
                {item.name}
              </a>
            </div>
          )
        }
      })
    }
    if (whatToRender === "christmas") {
      return arr.map((item) => {
        if (item.festival === "christmas") {
          return (
            <div key={item.image}>
              <a> {/* Image tags don't take children they are self-closing */}
                <img src={item.image} alt={item.name} />
                {item.name}
              </a>
            </div>
          )
        }
      })
    } // Return an empty div if none of the cases pass. So, you return valid JSX
    return <div></div>
  }
  return renderGrid() // Finally return your custom render function
}

export default Grid

EDIT

On visiting this question again, I realized that there was a better way to write it. A much shorter version. It uses the same arr defined in the above code sample.

const Grid = ({ whatToRender }) => {
  const renderGrid = () => {
    return arr.map((item) => {
      if (item.festival === whatToRender || whatToRender === "all") {
        return (
          <div key={item.image}>
            <a>
              <img src={item.image} alt={item.name} />
              {item.name}
            </a>
          </div>
        )
      }
    })
  }
  return renderGrid()
}

export default Grid

Which one to use? The second version not only because it's much shorter, but also because its reusable. If in the future you add another festival to arr say Easter, you just need changes in the array and the prop value you are passing. The component will require no changes.