Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

134
Visualizações
how to convert this into a typescript

How to make this jsx in typescript. In javascript, it looks like this. But in typescript, I don't know how to achieve this exact code!

const Users = ({details,deleteUser}) => {
    return (
        <>
            <div>
            {details.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                    <td className='delete-btn' onClick={() => deleteUser(detail.del)}>
                        Delete
                    </td>
                </tr>
            ))}
            </div>
        </>
    )}
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

As first you should define your props type:

type User = {
  del: string;
  name: string;
  email: string;
  pass: string;
  contact: string;
};
type UsersProps = {
  details: User[];
  deleteUser: (del: string) => void;
};

After this you should apply the type to the component props:

const Users = (props: UsersProps) => {
    const {details,deleteUser} = props;
    return (
        <>
            <div>
            {details.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                    <td className='delete-btn' onClick={() => deleteUser(detail.del)}>
                        Delete
                    </td>
                </tr>
            ))}
            </div>
        </>
    )
};

In this way typescript will show you any typo, for example if you write detail.mail instead of detail.email ts will highlight it for you.

about 4 years ago · Juan Pablo Isaza Relatório

0

At first, you need the interface of the User in typescript.

export default interface IUser {
   id: number,
   name: string,
   image: string,
   ...others
}

Then you need to define the passed parameters it should look like the User interface. So the code will be.

{details<IUser[]>.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                </tr>
            ))}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda