feat:Passando props para um componente

[vanderleipinto]

Na page principal usamos o elemento Person passando os valores para as props, como se fossem argumentos.

import { Geo, } from "@/components/Geo";
import { Person } from "@/components/Person";

function Page(){
  return(
    <div>
      <h1>Olá mundo</h1>
      <Geo/>
      <Person 
        name="Elon Musk Props"
        avatar= 'https://files.sunoresearch.com.br/p/uploads/2018/09/Elon-Musk-2-400x300.jpg'
        roles= {['Ceo da Tesla', 'Ceo da Spacex']}
      />
    </div>
  )
}

export default Page;

No componente vamos receber a props, mas para isso ela precisa ser tipada, por isso criaremos o type Props, aqui será criada no próprio arquivo do componente. Aqui o address pode ou não receber valores. Isso se dá por ('?') no final da declaração.

type Props = {
  name: string,
  avatar: string,
  roles: string[],
  address?: string //valor opcional, pode ou não receber valores por parâmetros.
}

Agora, no componente recebemos a props e usamos seus valores:

export const Person = (props: Props) => {
return (

      <div>
          <p>props.name, props.avatar, props.roles</p>        
          <h1 className="w-auto font-semibold text-2xl text-purple-300"> {props.name}</h1>
          <img src={props.avatar} alt={props.name} className="w-40"/>

          <ul>
            <li>{props.roles[0]}</li>
            <li>{props.roles[1]}</li>
          </ul>
        </div>
}

Podemos facilitar a leitura das props passando elas para constantes:

export const Person = (props: Props) => {

  const {name, avatar, roles} = props; 

  return (
    <div>
      <div>
        <p>name, avatar, roles</p>
        <h1 className="w-auto font-semibold text-2xl text-purple-300"> {name}</h1>
        <img src={avatar} alt={name} className="w-40"/>

        <ul>
          <li>{roles[0]}</li>
          <li>{roles[1]}</li>
        </ul>
      </div>
    </div>
  )
}

Para facilitar ainda mais podemos receber as props diretamente em constantes no parâmetro da função:

type Props = {
  name: string,
  avatar: string,
  roles: string[],
  adress?: string
}

export const Person = ({name, avatar, roles}: Props) => {

  return (
      <>
        <h1>{name}</h1>
        <img 
          src={avatar} 
          alt={name}
          className="w-40"
        />

        <ul>
          <li>{roles[0]}</li>
          <li>{roles[1]}</li>
        </ul>

      </>

    )
}