Question 321225 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Select a certain element from a .map array in react

I am new to react and have come across this problem. I have an Array list with at total of 4 items with content inside them. Each item has an id with its respective number 1-4. Is there any way that I can display specific item along with its contents using .map? For Example just display

"YOUR VISION. OUR REALITY."
"Innovators in creating landing pages, With eye catching designs guaranteed to boost your business."

const paraContent = [
  {
    heading: "YOUR VISION. OUR REALITY.",
    content:
      "Innovators in creating landing pages, With eye catching designs guaranteed to boost your business.",
    id: 1,
  },
  {
    heading: "YOUR VISION. OUR REALITY",
    content:
      "In 2023 Tlax generated as an idea in order to facilitate modern landing pages. December 2023 was when Tlax began to rise from the ground up. Slowly setting its prsence in the digital market..",
    id: 2,
  },
  {
    heading: "OUR MISSION",
    content:
      "Our mission at Tlax is to create simple and eye catching websites in order to meet personal needs and goals. From portfolio websites boosting your hiring probabilites to buisnisses websites advertising your services. Our goal in the end is to leave you with satisfaction and joy. Thats our moral code here at Tlax.",
    id: 3,
  },
  {
    heading: "ANGEL INFANTE",
    content:
      "Meet the face behind Tlax Web Design! Angel Infante is an aspiring programmer who is creative and enthusiastic about collaboration. Angel loves helping others in any way he can. He aspires to make everyone's day a bit better, and with his set of skills, creating websites in order to fulfill that joy was his calling.",
    id: 4,
  },
];



<div>
 <img src={shortArrow} alt="shortArrow"/>
   {paraContent.map((para, index)=>{
    return <Paragraph {...para} key={0} />
   })}
</div>

const Paragraph = (props) => {
  const {heading, content} = props;
  console.log(props);
  return(
    <div className="para">
      <h1 className="p-heading">{heading}</h1>
      <p className="p-content">{content}</p>
    </div>
  );
};

I tried implementing the key in my parameters but that resulted unsuccessful.

Tags:

2

Answers


  1. 0

    You can use Array#find to get one specific array element by its id.

    const searchId = 1;
const elem = paraContent.find(({id}) => id === searchId);
return (
    <div>
       <img src={shortArrow} alt="shortArrow"/>
       {elem && <Paragraph {...elem} />}
    </div>
);
    Login or Signup to reply.
  2. 0

    you can add a props isHide to component Paragraph ,just return null when you dont want to display it.

    ...
<div>
   {paraContent.map((para, index)=>{
    return <Paragraph {...para} key={index} isHide={para.heading!=='YOUR VISION. OUR REALITY.'} />
   })}
</div>
    const Paragraph = (props) =>  {
      const {heading, content} = props;
      if(isHide) return null
      return(
        <div className="para">
          <h1 className="p-heading">{heading}</h1>
          <p className="p-content">{content}</p>
        </div>
      );
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search