Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

130
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!