Passing props from class component in react + typescript

Question

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;

Would be nice to see a parent of Child Component, since I suspect you pass the prop in the wrong way. Child component seems fine — Terminat
– Terminat, Commented Jun 18, 2021 at 12:24
That's fine. You have to defined startTimeInSeconds in App component. — Gulam Hussain
– Gulam Hussain, Commented Jun 18, 2021 at 12:59

Gulam Hussain · Accepted Answer · 2021-06-18 13:03:03Z

2

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;

answered Jun 18, 2021 at 13:03

Gulam Hussain

1,81313 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Passing props from class component in react + typescript

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