6 Multiple 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: "Atharva Agrawal",
      key2: 1,
      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",
        },
      ],
    };
  }

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

export default First;

src/Second.tsx:

 
import React, { Component } from "react";
import Third from "./Third";

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>
        <Third
          key1={this.props.key1}
          key2={this.props.key2}
          key3={this.props.key3}
          key4={this.props.children}
        ></Third>
      </React.Fragment>
    );
  }
}

export default Second;

src/Third.tsx:

 
import React, { Component } from "react";

interface IState {}

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

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

  render() {
    return (
      <React.Fragment>
        <h1> {this.props.key1} </h1>
        <h2> {this.props.key2} </h2>
        <h2> {this.props.key4} </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 Third;

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:

6 Multiple Props Program in ReactJS using TypeScript

Related Post