Typescript React List

Question

React Typescript. I want to render this list, but doesn´t render.

I'm new with Typescript , i don´t undesrtand really well how to pass props from the App.tsx to the children Technology.tsx

Vue JS
Node JS
Angular JS
React JS

Technology.tsx

import React from 'react';

export type State = {
    id: number;
    name:string;
  } 
   
const Technology: React.FC <State[]>  = ({id,name}) => {
    return ( 
        <div >
            <h2 key={id}>{name}</h2>
        </div>
     );
}

export default Technology;

App.tsx

import React,{Fragment, useState} from 'react';
import Technology from './components/Technology'

 export type State = {
  id: number;
  name:string;
} 
 
const App: React.FC = () => {

  const [items, setItems] = useState  <State[]>([
    {id:2 , name: ' Vue JS' },
    {id:3 , name: ' Node JS'},
    {id:4 , name: ' Angular JS'},
    {id:1 , name: ' React JS'}
  ])
    
  return (
    <Fragment>
        <h1>List of technologies</h1>
       {items.map(item=>(
             <Technology
               technology= {item}  
            />
        ))} 
    </Fragment>
  );
}

export default App;

Alex Wayne · Accepted Answer · 2020-08-11 18:12:52Z

3

The props <Technology> accepts and the props you are passing in don't match up.

export type State = {
  id: number;
  name:string;
} 
const Technology: React.FC <State[]>  = ({id,name}) => { ... }

This expects props like:

<Technology id={item.id} name={item.name} />

You have to pass id and name as props explicitly.

Or you could change Technology's props to this:

export type State = {
  technology: {
    id: number;
    name:string;
  } 
}
const Technology: React.FC <State[]>  = ({technology}) => {
  return ( 
    <div >
      <h2 key={technology.id}>{technology.name}</h2>
    </div>
  );
}

And now you can pass in a single technology props like you have it above:

<Technology technology={item} />

answered Aug 11, 2020 at 18:12

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript React List

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related