Question:

Why Ternary operator logic not working for boolean

Query: React: Why Ternary operator logic not working for boolean evaluating to false when it's not false

Solution

Make sure to recheck your if statement. That might be creating the problem. Or, you are not passing the props correctly which is why it is showing the false result.

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 (

{lastOne ? project : project + " | "}

</a>

);

}

ReactDOM.render(<Example />, document.getElementById("react"));

However, since you'll have to loop through the items in the projects array, this is not very scalable. To see if that is the last item in the list, use the loop's iterator (map() in the examples):

{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>