This is my Code

App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { TextField } from './components/TextField';

function App() {

  return (
    <div className="App">
      <TextField name='fef' age=12/>
    </div>
  );
}

export default App;

TextField.tsx

import React,{useEffect, useRef, useState} from "react";

interface Props{
    name: string;
    age: number;
}

export const TextField:React.FC<Props> = ({name,age}) => {
    return (
        <div>
            <h2>Hello {name}, and I know that you are {age} years old</h2>
        </div>
    );
}

But I am getting this Error!

Type 'boolean' is not assignable to type 'number'.ts(2322)
TextField.tsx(5, 5): The expected type comes from property 'age' which is declared here on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

Please give me a Solution for this. I am New to React and Typescript.

CodePudding user response：

Numbers as props should be passed inside curly brackets. Only strings can be passed without the curly brackets, but they have to be wrapped inside the quotes, just like your name prop.

  return (
    <div className="App">
      <TextField name='fef' age={12}/>
    </div>
  );

CodePudding user response：

Try the following code instead:

age={12}

CodePudding user response：

You should set age prop such as age={12}. Here's the full code:

import "./styles.css";
import React, { useState } from "react";

interface Props {
  name: string;
  age: number;
}

export const TextField: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h2>
        Hello {name}, and I know that you are {age} years old
      </h2>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <TextField name="fef" age={12} />
    </div>
  );
}