Estou com uma duvida de como e quando passar um item como props

Olá Leandro!

A diferença entre as duas abordagens que você mencionou está na forma como os props são passados para o componente Lista.

Na primeira abordagem, utilizando o spread operator ({...materias}), todos os atributos do objeto materias são passados como props para o componente Lista. Isso significa que se o objeto materias tiver os atributos prop1, prop2 e prop3, o componente Lista terá acesso a esses atributos como props.prop1, props.prop2 e props.prop3.

Na segunda abordagem, utilizando a sintaxe materias={materias}, estamos passando explicitamente o objeto materias como prop chamada materias para o componente Lista. Isso significa que o componente Lista terá acesso ao objeto materias como props.materias.

A escolha entre uma abordagem e outra depende do que você precisa fazer no componente Lista e como você quer acessar os atributos do objeto materias.

Quanto ao spread operator ({...}), ele é uma funcionalidade do JavaScript que permite copiar todas as propriedades de um objeto para outro objeto. No caso do exemplo que você deu, o spread operator está sendo usado para copiar todas as propriedades do objeto materias para o componente Lista. Isso é útil quando você tem um objeto com várias propriedades e quer passá-las como props para um componente sem ter que digitar todas elas manualmente.

Espero ter esclarecido suas dúvidas! Se tiver mais alguma pergunta, é só me dizer. Espero ter ajudado e bons estudos!