Using function in JSX

Question

I have array of 4 objects. I have function which returns 3 random values from it. My javascript code is working but I want to display those values in JSX.

const postLinks = [
  {
    link: "/link1",
    title: "Title 1",
  },
  {
    link: "/link2",
    title: "Title 2",
  },
  {
    link: "/link3",
    title: "Title 3",
  },
  {
    link: "/link4",
    title: "Title 4",
  },
];

  
const Home = () => {
    const threeLinks = () => {
      const resLinks = postLinks
        .sort(() => Math.random() - Math.random())
        .slice(0, 3);
      //console.log(resLinks)
      const finalRes = resLinks.map((item) => {
        return { itemTitle: item.title, itemLink: item.link };
      });
      console.log(finalRes);
      return finalRes;
    };
    threeLinks();
    return(
        <div>
            {finalRes}
        </div>
    )
}

I can't directly write JS function inside JSX. And scope for threeLinks function is limited to that function. How can I get finalRes values in JSX.

score 1 · Accepted Answer · answered Feb 23 '21 at 16:17

There is no need to have this in a separate function, but if you want to then it's better to move the function outside the component, at least as long as it doesn't depend on any props.

If you can't do that that, which you seem to imply, then why have a function at all? Just execute the code directly in the component.

More importantly though: You cannot render plain objects with React. You actually have to map the data to some elements.

const postLinks = [{
    link: "/link1",
    title: "Title 1",
  },
  {
    link: "/link2",
    title: "Title 2",
  },
  {
    link: "/link3",
    title: "Title 3",
  },
  {
    link: "/link4",
    title: "Title 4",
  },
];

const Home = () => {
  const threeLinks = postLinks
    .sort(() => Math.random() - Math.random())
    .slice(0, 3);

  return (
    <div>
      {threeLinks.map(link => {
        // Create elements for the data.
        return <div>{`${link.title}: ${link.link}`} </div>
      })}
    </div>
  )
}

ReactDOM.render(<Home />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

You might also want to take a look at How to get a number of random elements from an array?

score 0 · Answer 2 · answered Feb 23 '21 at 16:24

Here is the environment for your code.

I think you are missing the reference to the library, as @Felix Kling mentioned.

Apart from that, you are doing some data wrangling that is not clear for me.

import React from "react";

const postLinks = [
  {
    link: "/link1",
    title: "Title 1"
  },
  {
    link: "/link2",
    title: "Title 2"
  },
  {
    link: "/link3",
    title: "Title 3"
  },
  {
    link: "/link4",
    title: "Title 4"
  }
];

const getLinks = () => {
  const resLinks = postLinks
    .sort(() => Math.random() - Math.random())
    .slice(0, 3);

  return resLinks.map((item) => (
    <ul>
      <li key={item.title}>
        <a href={item.link}>{item.title}</a>
      </li>
    </ul>
  ));
};

const Home = () => {
  const result = getLinks();
  return <div>{result}</div>;
};

export default Home;

Using function in JSX

2 Answers2