Passing props from class component in react + typescript

chrischris96

I am new to typescript and am wondering how to pass the prop from my class component to a parent class.

My child class looks like this:

import React from "react";

type Props = {
startTimeInSeconds: number;
}

type State = {
timeRemainingInSeconds: number;
}


export default class Child extends React.Component<Props, State>{
    private timer: any;

constructor(props: Props) {
  super(props);
  this.state = {
    timeRemainingInSeconds: props.startTimeInSeconds
  };
}

decrementTimeRemaining = () => {
  if (this.state.timeRemainingInSeconds > 0) {
    this.setState({
      timeRemainingInSeconds: this.state.timeRemainingInSeconds - 1
    });
  } else {
    clearInterval(this.timer!);
  }
};

componentDidMount() {
  this.timer = setInterval(() => {
    this.decrementTimeRemaining();
  }, 1000);
}

render() {
  return (
    <div className="countdown-timer">
      <div className="countdown-timer__circle">
        <svg>
          <circle
            r="24"
            cx="26"
            cy="26"
            style={{
              animation: `countdown-animation ${this.props
                .startTimeInSeconds}s linear`
            }}
          />
        </svg>
      </div>
      <div className="countdown-timer__text">
        {this.state.timeRemainingInSeconds}s
      </div>
    </div>
  );
}
}

I wanted to call this child component in my parent component but I don't get how it is working. I tried to call the child within the parent with

<Child startTimeInSeconds = { this.startTimeInSeconds } />

but it throws an error.

A (simplified) parent component looks like this:

import '../css/App.css';
import * as React from "react";
import Child from "./ChildComponent"

function App(props) {
  return (
    <>
    <div>
        <Child startTimeInSeconds = { this.startTimeInSeconds } />
    </div>
    </>
  );
}

export default App;
hussain.codes

Your Child component is fine, but you are passing incorrect props to it.

In App component you need to define startTimeInSeconds variable>

You parent component should look like this -

import '../css/App.css';
import * as React from "react";
import Child from "./ChildComponent"

function App(props) {
  const startTimeInSeconds = 0; //or any number
  return (
    <>
    <div>
        <Child startTimeInSeconds = { startTimeInSeconds } />
    </div>
    </>
  );
}

export default App;

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Passing multiple props to React component

TypeScript conditional types: Extract component props type from react component

React passing props from const to child component

Passing child component class as props to parent component in React

React + TypeScript: Passing React Component as Props, rendering with props [Error: TS2339]

Rendering react component using typescript without passing in strongly typed props

Passing Props from Route to Component in React

Passing props from class to nested functional component

Error Coming when passing props from one component to another and vice - versa in react using typescript

React styled component not passing props from attribute

React not passing props to component

React js Passing props to a component

Passing react props to a component and displaying

TypeScript + React <- passing props

TypeScript error in passing props to child component in react

Props is not passing in child component in react

React: How can you access the class name of a parent component from a child without passing it down as props?

Passing props from component to component | React

Passing a function to React component in props

passing props from parent to child in react class based component

TypeScript error when passing untyped string to React component with typed props?

React typescript pass props interface to the class component

Passing Props in React Functional Component

React.Js Passing props from component to NavBar component?

Is there a way of passing props to class component?

typecast react typescript component class props

Getting toogleShow is not function when passing as props in react typescript functional component

Passing props from one class component to other in react js

React: Ways of passing component as a props