Getting an error while passing props to child in react TS

Question

I am new to React and Typescript. When I am trying to pass props to child from parent I am getting Error:

TS2322: Type '{ changeValue: () => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.   Property 'changeValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

parent.tsx:

import * as React from 'react';
import { Child } from '../components/Child';

const Parent: React.FC = () => {

    function changeValue() {
        console.log("hello");
    }
  return (
    <div>
        <Child changeValue={changeValue}/>
      </div>
  );
};
export default Parent;

Child.tsx:

import * as React from 'react';
import { useState } from 'react';

export const Child: React.FC = (props) => {
  const [textValue, setTextValue] = useState(
    'let name; \n' + 'let age; \n' + 'name = 5;'
  );

  return (
    <div>
      <textarea
        id="details"
        name="details"
        value={props.data}
        onChange={() => changeValue}
      />
    </div>
  );
};

I saw some answers in stackoverflow, but not able to figure out why the error is coming. I am not sure what I am missing here. Thanks in advance.

Answer 1

Here is a functional example of lifting state up in TypeScript React using a controlled textarea element:

TS Playground link

import {
  default as React,
  ReactElement,
  useState,
} from 'react';

type ChildProps = {
  handleChange: (value: string) => void;
  text: string;
};

const Child = (props: ChildProps): ReactElement => {
  return (
    <div>
      <textarea
        id="details"
        name="details"
        onChange={ev => props.handleChange(ev.target.value)}
        value={props.text}
      />
    </div>
  );
};

const Parent = (): ReactElement => {
  const [textValue, setTextValue] = useState('let name; \n' + 'let age; \n' + 'name = 5;');

  const handleTextValueChange = (value: string) => {
    console.log(value);
    setTextValue(value);
  };

  return (
    <div>
      <Child text={textValue} handleChange={handleTextValueChange} />
    </div>
  );
};

You can run the example above using this snippet code to see it working:

textarea {
  height: 50vh;
  width: 70vw;
}

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

/**
 * The following line is here because this Stack Overflow snippet uses the
 * UMD module for React. In your code, you'd use the commented `import` lines
 * below it.
 */
const {useState} = React;

// import ReactDOM from 'react-dom';
// import {
//   default as React,
//   ReactElement,
//   useState,
// } from 'react';

type ChildProps = {
  handleChange: (value: string) => void;
  text: string;
};

const Child = (props: ChildProps): ReactElement => {
  return (
    <div>
      <textarea
        id="details"
        name="details"
        onChange={ev => props.handleChange(ev.target.value)}
        value={props.text}
      />
    </div>
  );
};

const Parent = (): ReactElement => {
  const [textValue, setTextValue] = useState('let name; \n' + 'let age; \n' + 'name = 5;');

  const handleTextValueChange = (value: string) => {
    console.log(value);
    setTextValue(value);
  };

  return (
    <div>
      <Child text={textValue} handleChange={handleTextValueChange} />
    </div>
  );
};

function Example (): ReactElement {
  return <Parent />;
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>