Correção `1.7.2`

[mathiasgheno]

Correção 1.7.2

Considere o component Personagens declarado abaixo. Faça uma alteração na renderização do JSX para que sejam exibidos apenas personagens da família (por exemplo, Redfield) parametrizada através do uso das props do React. Procure na documentação sobre métodos de strings disponíveis para descobrir qual método pode te ajudar nessa tarefa.

const Personagens = () => {
 const personagens = [
  'Jill Valentine',
  'Claire Redfield',
  'Ada Wong',
  'Chris Redfield',
  'Leon S. Kennedy',
  'Albert Wesker',
 ];
 return (
  <div>
   <h3>Personagens de Resident Evil</h3>
   <ul>
    {personagens.map(personagem => (
     <li>{personagem}</li>
    ))}
   </ul>
  </div>
 )
}

O principal problema está no uso do seu map na linha 50. Esse map vai fazer com que a sua lista de personagens filtrados sejam se torna um array de undefined. Além disso, a lógica do seu filter deveria ser feito dentro do component PesonagensRender porque o exercício pede que a família seja definida via props ─ logo, precisa acessar o props.familia. Veja abaixo um exemplo de como isso poderia ser atendido.

export const PersonagensRender = (props) => {
  const { familia } = props;
  return (
    <div>
      <h3>Personagens de Resident Evil</h3>
      <ul>
        {personagens
           .filter((personagem) => personagem.includes(familia))
           .map((personagem) => <li>{personagem}</li>)}
      </ul>
    </div>
  );
};

Nota: 6