5 Props Program in ReactJS using TypeScript ~ Coding Atharva

src/First.tsx:

 
import React,{Component} from 'react'

import Second from "./Second";
interface IState{
    key1: string;
    key2: number;
    key3: any[];
};

interface IProps{};

class First extends Component<IProps,IState>{
    constructor(props:IProps){
        super(props);
        this.state ={ 
            "key1": "React-JS",
            "key2": 17.2,
            "key3":[
                {"name":"Shirt","price":100,"rating":2.5,"image":"https://pisco.meaww.com/6ec1615c-5a8d-45ab-b7e1-04e1ad228f7d.634818810"},
                {"name":"Polo Shirt","price":200,"rating":2.5,"image":"https://pisco.meaww.com/6ec1615c-5a8d-45ab-b7e1-04e1ad228f7d.634818810"},
                {"name":"American Shirt","price":300,"rating":2.5,"image":"https://pisco.meaww.com/6ec1615c-5a8d-45ab-b7e1-04e1ad228f7d.634818810"},
                {"name":"Pant","price":400,"rating":2.5,"image":"https://pisco.meaww.com/6ec1615c-5a8d-45ab-b7e1-04e1ad228f7d.634818810"}
            ]
        };
    }

    render(){
        return(
            <React.Fragment>
                <Second key1={this.state.key1} 
                        key2={this.state.key2}
                        key3={this.state.key3}>        
                </Second>
            </React.Fragment>
        );
    };
}

export default First;

src/Second.tsx:

 
import React,{Component} from 'react'

interface IState{};

interface IProps{
    key1: string;
    key2: number;
    key3: any[];
};

class Second extends Component<IProps,IState>{
    constructor(props:IProps){
        super(props);
    }

    render(){
        return(
            <React.Fragment>
                <h1> "Hey!" </h1>
                <h2> {this.props.key1} </h2>
                <h2> {this.props.key2} </h2>
              
                <table>
                    <tr>
                        <th>SNO</th>
                        <th>NAME</th>
                        <th>PRICE</th>
                        <th>RATING</th>
                        <th>IMAGE</th>
                    </tr>
                    {this.props.key3.map((element,index)=>(
                        <tr key={index}>
                            <td> {index+1} </td>
                            <td> {element.name} </td>
                            <td> {element.price} </td>
                            <td> {element.rating} </td>
                            <td> <img width="100" src={element.image} alt={element.name}></img> </td>
                        </tr>
                    ))}
                </table>
            </React.Fragment>
        );
        };
    };


export default Second;

src/index.tsx:

 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import First from "./First";

ReactDOM.render(
  <React.StrictMode>
    <First />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Output:

5 Props Program in ReactJS using TypeScript

Related Post