JAVASCRIPT

pass object as props

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>
  );
}

react pass object as props

Use the "spread" operator {... }

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

Passing objects as Props in react

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