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

Javascript – .map is only working on 1st element when returning the card in react

The Arrays.map is only working for the first object of the array .

This the is the main Function :-

function App(){

    return (
        <div>
            <NavBar />
            {
                data.map((prop) => {
                    return  <Card img = {prop.img} title = {prop.title} />
                })
            };
        </div>
    );
}

ReactDOM.render(App() , document.getElementById('root'));

The Card that is supposed to take different values from map function :-

export default function Card({img , title}){

    return (
        <div id = "card">
            <div id = "card-image">
                <img src = {img} alt = "capy1"></img>
            </div>
            <div id = "card-info">
                <span id = "card-title"><h3>{title}</h3></span>
                <span>
                    <h4>Weight : </h4>
                    <p>

                    </p>
                </span>
                <span>
                    <h4>
                        Height :
                    </h4>
                    <p>

                    </p>
                </span>
                <span>
                    <h4>
                        Description :
                    </h4>
                    <p>

                    </p>
                </span>

            </div>
        </div>
    );
}

The Data that is being passed is :-

const data = [
    {
      title: "GOD OF CAPYS",
      img: "./resources/capy1.jpg"
    },
    {
      title: "Black CAPYS",
      img: "./resources/black_capy.jpg"
    }
  ];
  
export default data;

The Output is just the first card . The 2nd card is not rendering maybe because its now getting the data from the array.

Tags:

3

Answers


  1. 0

    I recommend that you get adequate training.

    Question answer;
    return is just function redirection. It cannot run a loop.

    Login or Signup to reply.
  2. 0

    try with this code Check this

    import Card from "./Card";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      {data.map((prop, index) => {
        return <Card key={index} img={prop.img} title={prop.title} />;
      })}
    </div>
  );
}
const data = [
  {
    title: "GOD OF CAPYS",
    img: "https://picsum.photos/id/1/200/300"
  },
  {
    title: "Black CAPYS",
    img: "https://picsum.photos/id/2/200/300"
  }
];
    Login or Signup to reply.
  3. 0 
      {
                data.map((prop)=>{
                    return (
                        <Card key={prop.title} img={prop.img} title={prop.title}/>
                    )
                })
            }

    However i recommend using index as key

    {
                    data.map((prop, index)=>{
                        return (
                            <Card key={index} img={prop.img} title={prop.title}/>
                        )
                    })
                }

    works fine for me in both ways!!

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

Back To Top
Search