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

user_14942204 0
Viewed 326

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

enter image description here


What should I have to do?

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

typescript reactjs
4 Answers

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

Edit cocky-sea-edyrw

user_149863720

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

Try the following code instead:

age={12}
user_26510060

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

user_140991910
Related