React useState: How to put ternary operator within a ternary operator?-CodePudding

I'm mapping an array of items. Some items must display videos and others, images. I made 2 functions for each display and I'm using useState to toggle them.

export default function App() {
  //SIMPLE USESTATE TO TOGGLE WINDOW
  const [open, setOpen] = useState(false);

  //THE ARRAY (1 contains an image and the other a video)
  const itemsArray = [
    {
      name: "Item1",
      imageUrl: "some image url"
    },
    {
      name: "Item2",
      videoUrl: "some video url"
    }
  ];

  //RENDER THIS IF ITEM IS IMAGE
  const ifImage = (i) => {
    return (
      <div onClick={() => setOpen(!open)}>
        <img src={i} alt="cat" />
      </div>
    );
  };

  //RENDER THIS IF ITEM IS VIDEO
  const ifVideo = (v) => {
    return (
      <div className="window-on-top" onClick={() => setOpen(!open)}>
        <iframe>Some Video</iframe>
      </div>
    );
  };

  return (
    <div className="App">
      <h3>One button shows a cat photo and the other a cat video</h3>
      {itemsArray.map((item) => {
        return (
          <div key={item.name}>
            <button className="niceBtn" onClick={() => setOpen(!open)}>
              {item.name}
            </button>

            {/* NESTING CONDITIONALS OR SOMETHING TO MAKE THIS WORK */}
            {open ? {
          {item.imageUrl ? ifImage(item.imageUrl): null}
          ||
          {item.videoUrl ? ifVideo(item.videoUrl): null}
        } : null}
          </div>
        );
      })}
    </div>
  );
}

I'm obviously wrong... Need some help understanding how to solve this... Here is a Sandbox with the code to watch it properly. SANDBOX

CodePudding user response：

I'd put the conditions inside the subfunctions instead, which should make it easy to understand what's going on.

const tryImage = item => (
    !item.imageUrl ? null : (
        <div onClick={() => setOpen(!open)}>
            <img src={item.imageUrl} alt="cat" />
        </div>
    ));
const tryVideo = item => (
    !item.videoUrl ? null : (
        <div onClick={() => setOpen(!open)}>
            <img src={item.videoUrl} alt="cat" />
        </div>
    ));

return (
    <div className="App">
        <h3>One button shows a cat photo and the other a cat video</h3>
        {itemsArray.map((item) => {
            return (
                <div key={item.name}>
                    <button className="niceBtn" onClick={() => setOpen(!open)}>
                        {item.name}
                    </button>
                    {open && ([
                        tryImage(item),
                        tryVideo(item),
                    ])}
                </div>
            );
        })}
    </div>
);

Not sure, but you also probably want a separate open state for each item in the array, rather than a single state for the whole app.