Breaking News: Grepper is joining You.com. Read the official announcement!

Spread Object as Props

Puzzled Penguin answered on December 7, 2024 Popularity 4/10 Helpfulness 1/10

answer Spread Object as Props

Spread Object as Props

Comment

Spread Object as Props

import Header from "./components/Header"
import Entry from "./components/Entry"
import data from "./data"

export default function App() {
    
    const entryElements = data.map((entry) => {
        return (
            <Entry
                key={entry.id}
                {...entry}
            />
        )
    })
    
    return (
        <>
            <Header />
            <main className="container">
                {entryElements}
            </main>
        </>
    )
}

import marker from "../../assets/marker.png";

export default function Entry(props) {
  console.log(props);
  return (
    <article className="journal-entry">
      <div className="main-image-container">
        <img className="main-image" src={props.img.src} alt={props.img.alt} />
      </div>
      <div className="info-container">
        <img className="marker" src={marker} alt="map marker icon" />
        <span className="country">{props.country}</span>
        <a href={props.entry.googleMapsLink}>View on Google Maps</a>
        <h2 className="entry-title">{props.title}</h2>
        <p className="trip-dates">{props.dates}</p>
        <p className="entry-text">{props.text}</p>
      </div>
    </article>
  );
}

Popularity 4/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: object spread whatever

Link to this answer
Share Copy Link

Contributed on Dec 07 2024

Puzzled Penguin

0 Answers Avg Quality 2/10

Spread Object as Props

Contents

More Related Answers

Spread Object as Props

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.