TypeScript React, unable to send props to component

Question

I have a simple button component, I am styling it with styled components, but I can not send a simple prop to the component as TypeScript complains with No overload matches this call

App.tsx

import React from 'react';

import Button from '../form/button';

export const App = (): React.ReactElement => <Button secondary>Click me</Button>;

Button.tsx

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #333;
  padding: 10px 20px;
  color: ${({ secondary }) => (secondary ? 'white' : 'red')};
`;

interface Props {
  children: string;
  secondary?: any;
}

const Button: React.FC<Props> = ({ children, secondary }) => (
  <StyledButton secondary={secondary}>{children}</StyledButton>
);

export default Button;

This should work, what does TypeScript needs me to specify? The error is not very helpful

@Álvaro children: React.ReactNode and secondary: boolean — Ramesh Reddy
– Ramesh Reddy, Commented Jan 16, 2021 at 13:10
codesandbox.io/s/headless-silence-uwv7z?file=/src/Button.tsx here is the working code — Sam
– Sam, Commented Jan 16, 2021 at 13:13

Oli · Accepted Answer · 2021-01-16 13:20:03Z

1

It's because you haven't passed the props to the styled component, so it does not know what secondary is.

You can pass your props like so (and I removed children since you don't need to specify this manually)

import React from "react";
import styled from "styled-components";

interface Props {
  secondary?: any;
}

const StyledButton = styled.button<Props>`
  background-color: #333;
  padding: 10px 20px;
  color: ${({ secondary }) => (secondary ? "white" : "red")};
`;


const Button: React.FC<Props> = ({ children, secondary }) => (
  <StyledButton secondary={secondary}>{children}</StyledButton>
);

export default Button;

CodeSandbox: https://codesandbox.io/s/determined-worker-62xtm?file=/src/form/Button.tsx

edited Jan 16, 2021 at 13:20

answered Jan 16, 2021 at 13:14

Oli

8727 silver badges13 bronze badges

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

2 Comments

Álvaro Over a year ago

Thanks, It turns out I still needed to change the type to boolean on secondary for it to work, but with that and your changes is good now

Oli Over a year ago

Yes, boolean is what you should be using. ;)

yudhiesh · Accepted Answer · 2021-01-16 13:14:36Z

0

You can just specify that the props passed and then destructured are from the interface Props and access the parameter secondary.

const StyledButton = styled.button`
  background-color: #333;
  padding: 10px 20px;
  color: ${({secondary}: Props) => (secondary ? 'white' : 'red')}
`;

answered Jan 16, 2021 at 13:14

yudhiesh

6,8774 gold badges25 silver badges56 bronze badges

Collectives™ on Stack Overflow

TypeScript React, unable to send props to component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related