How to send data b/w parent and child in spfx react

Question

I have a parent component and i want to send data to it's child component.

I tried using the react method of passing the data but got error.

Error:

Type '{ pdata: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly<{}>'. Property 'pdata' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

Below is the code

Parent file:

<Modern pdata={this.state.length} />

Child file:

import * as React from "react";
export default class Modern extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>Hello Modern {this.props.pdata}</p>
      </div>
    );
  }
}

Shyam Shyam · Accepted Answer · 2019-11-21T06:48:09

React is spfx uses typescript . so you need to create a interface for the props .

interface ModernProps {
pdata: number;
}

export default class Modern extends React.Component<ModernProps>

How to send data b/w parent and child in spfx react

2 Answers