Type 'boolean' is not assignable to type 'number'.ts

Question

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; }'

What should I have to do?

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

Answer 1

you can solve this issue by changing the TextField.tsx return to code below,

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

this

age=12

give you "12" but

age={12}

gives you a number

Answer 2

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>
  );

Answer 3

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>
  );
}

Answer 4

Try the following code instead:

age={12}