How to define custom props in a react functional component with typescript?

Question

I just started a new react project with typescript and I'm having difficulty defining a custom prop in a functional component.

I looked up how to define custom props and I found a way of defining an interface detailing the type of prop I'm passing in to the function, but when I try to run it on my main App, I get an error saying

Type '{ digit: number; }' is not assignable to type 'IntrinsicAttributes'. Property 'digit' does not exist on type 'IntrinsicAttributes'. TS2322

My code :

import React from 'react';
import Button from '@mui/material/Button';
export {}


interface NumberButton {
  digit:number,
}

function NumberButton(props:NumberButton){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import ClearButton from './Components';
import NumberButton from './Components';
export default function App(){

  return (
    <div>
      <ClearButton/>
      <NumberButton digit={1}/>
    </div>
  )
}

I'm trying to get more familiar with functional components after using hooks and I'm hooked on using them.

Nicholas Tower · Accepted Answer · 2021-09-25 18:09:32Z

9

export {}

Currently you're not exporting the NumberButton component, so that's the main thing that needs fixing. Additionally, you're using the same variable name for both the component and the props. Try this:

import React from 'react';
import Button from '@mui/material/Button';

interface NumberButtonProps {
  digit: number,
}

function NumberButton(props: NumberButtonProps){
  return (
    <Button variant="contained" color="primary">{props.digit}</Button>
  )
}

export default NumberButton;

edited Sep 25, 2021 at 18:09

answered Sep 25, 2021 at 18:04

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Esam Olwan Over a year ago

Thanks, it worked. If I've multiple components I want exported that are in the same file , how do I manage to do that? "export default <Component>" only exports one.

Nicholas Tower Over a year ago

use named exports instead. Eg, export function NumberButton(props: NumberButtonProps){ /*etc*). Don't forget to change your imports to named imports too, as in import { NumberButton } from 'insertFileNameHere'

Collectives™ on Stack Overflow

How to define custom props in a react functional component with typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related