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

Question

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

Answer 1

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.