CODEWITHSUNDEEP
reactjstypescript
Hiba Youssef
Hiba Youssef

Reputation: 1392

Type of props is not assignable to type 'string'

I have a component (StepperTile) that accepts the following props:

title_part_1

title_part_2

But when I try to render the component I receive this error in the file for StepperTile:

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

and this error in the file for the component that renders StepperTile as a child:

Type '{ title_part_1: string; title_part_2: string; }' is not assignable to type 'string'

This is the definition of my component:

import { Center, VStack, Text, Box } from '@chakra-ui/react';
import React from 'react';

const StepperTitle = (title_part_1: string, title_part_2: string) => {
    return (
        <>
            <Box>
                <VStack>
                    <Text
                        fontWeight='700'
                        fontSize={['18px', '23px', '23px', '25px', '28px']}
                        lineHeight='34px'
                        color='#434E61'

                    >
                        {title_part_1}
                    </Text>

                    <Center>
                        <Text
                            fontWeight='700'
                            fontSize={['18px', '23px', '23px', '25px', '28px']}
                            lineHeight='34px'
                            color='#434E61'
                        >
                            {title_part_2}
                        </Text>
                    </Center>
                </VStack>
            </Box>
        </>
    )
}

export default StepperTitle;

And this is how I render the component:

<StepperTitle title_part_1=' Tell us what you’re' title_part_2='interested in' />

Upvotes: 1

Views: 372

Answers (1)

Henry
Henry

Reputation: 15732

In React props are passed as an object, not as individual arguments. Read the docs on Components and Props for details.

You need to redefine your <StepperTitle> component to reflect this so that it accepts a single argument that is an object of props with your desired type, so change:

const StepperTitle = (title_part_1: string, title_part_2: string) => {

to:

const StepperTitle = ({ title_part_1, title_part_2 }: { title_part_1: string, title_part_2: string }) => {

What's happening now is that React is passing the whole props object into the first argument (title_part_1), which is meant to be a string, which is why you get that type error.

Upvotes: 3

Related Questions