Question 309588 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Ternary operator logic not working for boolean, evaluating to false when it's not false

I’m mapping a little block of project objects for a set of footer links and I want each project name to be followed by a | EXCEPT the last one. Here’s the code.

const projects = [
  {
    lastOne: false,
    project: "Kuma",
    link: "",
    image: "./kuma.png",
  },
  {
    lastOne: false,
    project: "Rin Starseed",
    link: "",
    image: "./star.png",
  },
  {
    lastOne: true,
    project: "Sea Harvest",
    link: "",
    image: "./fish.png",
  },
];

Then the logic in the footer component


function ProjectLinks({ link, project, lastOne }) {
  return (
    <a href={link} target="_blank" style={{ color: "white" }}>
      {lastOne ? project + " | " : project}
    </a>
  );
}

It evaluates to false, only lists the project names no |

Tags:

2

Answers


  1. 0

    Your if statement is the wrong way around, it should be:

    {lastOne ? project : (project + " | ")}

    You’re probably not passing the props to ProjectLinks whereby lastOne is a falsy value and so the | isn’t shown.

    You could spread the complete object to pass all the props:

    {projects.map(p => <ProjectLinks {...p} /> )}
    Demo:
    const { useState } = React;

const Example = () => {

    const projects = [
        {lastOne: false, project: "Kuma", link: "", image: "./kuma.png", },
        {lastOne: false, project: "Rin Starseed", link: "", image: "./star.png", },
        {lastOne: true, project: "Sea Harvest", link: "", image: "./fish.png", },
    ];

    return (
        <div>
            {projects.map(p => <ProjectLinks {...p} /> )}
        </div>
    )
}

function ProjectLinks({ link, project, lastOne }) {
    return (
        <a href={link} target="_blank" style={{ color: "red" }}>
            {lastOne ? project : project + " | "}
        </a>
    );
}
ReactDOM.render(<Example />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

    But this is not really scalable, since you’ll need to loop over the items in the projects array, you can use the iterator of the loop (map() in the examples) to check if that is the last item in the list:

    {projects.map((p, i) => <ProjectLinks {...p} lastOne={i === projects.length - 1} /> )}
    Demo:
    const Example = () => {

    const projects = [
        { project: "Kuma", link: "", image: "./kuma.png", },
        { project: "Rin Starseed", link: "", image: "./star.png", },
        { project: "Sea Harvest", link: "", image: "./fish.png", },
    ];

    return (
        <div>
            {projects.map((p, i) => <ProjectLinks {...p} lastOne={i === projects.length - 1} /> )}
        </div>
    )
}

function ProjectLinks({ link, project, lastOne }) {
    return (
        <a href={link} target="_blank" style={{ color: "red" }}>
            {lastOne ? project : project + " | "}
        </a>
    );
}
ReactDOM.render(<Example />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
  2. 0

    It looks like you want to display a "|" after each project name except for the last one in your footer. The issue here is that your logic in the ProjectLinks component is checking lastOne to determine whether to include the "|" symbol. However, in your data, you are setting lastOne to true for the last project.

    Here’s a corrected version of your logic:

        function ProjectLinks({ link, project, lastOne }) {
  return (
    <a href={link} target="_blank" style={{ color: "white" }}>
      {lastOne ? project : project + " | "}
    </a>
  );
}

    This way, the "|" symbol will be appended to the project name for all projects except the last one. If lastOne is true, only the project name will be displayed.

    Also, make sure you pass the correct values when using the ProjectLinks component in your code:

    {projects.map((project, index) => (
  <ProjectLinks
    key={index}
    link={project.link}
    project={project.project}
    lastOne={project.lastOne}
  />
))}

    This assumes that the lastOne property in each project object is correctly set to true for the last project and false for the others.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search