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

Pass Object as Props

Add Answer

Puzzled Penguin answered on September 10, 2021 Popularity 1/10 Helpfulness 1/10

answer Pass Object as Props

related pass object as props

related Passing objects as Props in react

related react pass object as props

Pass Object as Props

Comment

Pass Object as Props

import { useState } from "react";
import "./style/TravelJournal.css";
import Entry from "./components/TravelJournal/Entry";
import Header from "./components/TravelJournal/Header";

import TravelData from "./TravelData";

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

export default App;

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.entry.img.src}
          alt={props.entry.img.alt}
        />
      </div>
      <div className="info-container">
        <img className="marker" src={marker} alt="map marker icon" />
        <span className="country">{props.entry.country}</span>
        <a href={props.entry.googleMapsLink}>View on Google Maps</a>
        <h2 className="entry-title">{props.entry.title}</h2>
        <p className="trip-dates">{props.entry.dates}</p>
        <p className="entry-text">{props.entry.text}</p>
      </div>
    </article>
  );
}

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: object whatever

Link to this answer
Share Copy Link

Contributed on Dec 07 2024

Puzzled Penguin

0 Answers Avg Quality 2/10

Closely Related Answers

pass object as props

Comment

interface EmployeeProps {
  name: string;
  age: number;
  country: string;
}

function Employee({name, age, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Employee {...obj} />
    </div>
  );
}

Popularity 10/10 Helpfulness 4/10 Language typescript

Source: bobbyhadz.com

Tags: object ob

Link to this answer
Share Copy Link

Contributed on Nov 03 2022

Fateme Hemmati

0 Answers Avg Quality 2/10

Passing objects as Props in react

Comment

const UserCard = props => {
  const name = props.user.name
  const role = props.user.role
  const age = props.user.age
  const profilePic = props.user.profilePic
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
      <p>Age: {age}</p>
      <img src={profilePic} alt={name} />
    </div>
  )
}

function App() {
  const user = {
    name: "Ranjeet",
    role: "WordPress Developer",
    age: 27,
    profilePic: "image.jpg",
  }

  return (
    <div>
      <UserCard user={user} />
    </div>
  )
}

export default App

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: softhunt.net

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Outrageous Ostrich

0 Answers Avg Quality 2/10

react pass object as props

Comment

Use the "spread" operator {... }

Usage: <MyJsx {...commonProps} />

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 10 2021

Av3

0 Answers Avg Quality 2/10

Pass Object as Props

Contents

More Related Answers

Pass Object as Props

Closely Related Answers

pass object as props

Passing objects as Props in react

react pass object as props

Grepper

Documentation

Social

Legal

Contact

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