Props: Comunicação entre Componentes Pai e Filho no React

No desenvolvimento de aplicações React, uma das funcionalidades chave é a comunicação entre componentes. A principal maneira de um componente interagir com outro é através das suas propriedades, conhecidas como props.

💬 Comunicação através de Props

• As props são a forma primária de passagem de dados entre componentes, permitindo que um componente pai envie dados para um componente filho.
• Além de dados, é possível passar funções como props, facilitando a comunicação bidirecional entre componentes.

👨‍💻 Exemplo com Componente Pai: Post

export const Post = ({ author, publishedAt, content, deleteComment }: PostProps) => {
  const [comments, setComments] = useState([
    "Lembre-se, cada truque merece um petisco! 🍖",
    // outros comentários
  ]);

  return (
    <div>
      {/* detalhes do post */}
      {comments.map((comment, index) => (
        <Comment
          key={index}
          content={comment}
          onDeleteComment={() => deleteComment(index)}
        />
      ))}
    </div>
  );
};

Neste exemplo, Post é o componente pai que mantém o estado dos comentários e passa uma função onDeleteComment como prop para o componente filho Comment.

✅ Boas Práticas com Props

Ao passar funções como props, é uma boa prática nomeá-las iniciando com on, indicando que são eventos ou callbacks. Por exemplo, onDeleteComment.

🧒 Exemplo com Componente Filho: Comment

export const Comment = ({ content, onDeleteComment }: CommentProps) => {
  return (
    <div>
      {content}
      <button onClick={onDeleteComment}>Excluir</button>
    </div>
  );
};

O componente Comment recebe a prop onDeleteComment e a utiliza para permitir que um usuário exclua um comentário.

🔗 Repositórios dos Componentes:

• Comment: GitHub - Comment
• Post: GitHub - Post

🎯 Conclusão

Entender como as props funcionam é fundamental para criar aplicações React eficientes e manuteníveis. Elas permitem uma comunicação clara e direta entre componentes, facilitando o gerenciamento de estados e a execução de ações específicas. Ao adotar boas práticas na nomeação e uso de props, desenvolvedores podem garantir um código mais legível e fácil de manter. Assim, as props se tornam uma ferramenta poderosa no kit de ferramentas de qualquer desenvolvedor React, permitindo a construção de aplicações interativas e dinâmicas.