This is my first time using typescript, I have multiple interfaces, and each interface has a title, and this title has the same style on all pages, so I decided to use a dynamic method, I called the "StepperTitle" component in the "SelectInterests" component, and I should Pass the following data to the second component:
title_part_1
title_part_2
But I had this error:
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:
Type '{ title_part_1: string; title_part_2: string; }' is not assignable to type 'string'
StepperTitle.tsx:
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;
select-interest.tsx:
import { VStack, Box, Text, Center, Circle, Stack, Image, Grid, HStack, Button, Link } from '@chakra-ui/react';
import React from 'react';
import InterestCard from '../helper-stepper/interestCard';
import MessageModal from '../helper-stepper/messageModal';
import StepperTitle from '../shared/stepper-title';
const SelectInterests = () => {
const [counter, setCounter] = React.useState(0);
const hasPickedTreeOrMore = counter >= 3;
const imageClickable = () => {
setCounter(counter 1);
console.log('I am inside counter: ', counter);
}
const stopCounter = () => {
if (counter < 3) {
return true;
}
else return false;
}
const getColor = () => {
if (counter < 3) {
return '#B3B3B3;'
}
else {
return '#FF8C1E'
}
}
const clickButton = () => {
console.log('click on meeeeeeee')
}
const [isHovering, setIsHovering] = React.useState(false);
const handleMouseEnter = () => {
setIsHovering(true);
};
const handleMouseLeave = () => {
setIsHovering(false);
};
return (
<VStack pt='72.35px'>
<StepperTitle title_part_1=' Tell us what you’re' title_part_2='interested in' />
<Stack>
<HStack pt='73px'>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
{/* <Text>Hi</Text> */}
<Link onClick={imageClickable}>
<Image src='images/interest-1.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="10px"
h='125.04px'
overflow="hidden"
style={{
backgroundColor: isHovering ? 'red' : '',
color: isHovering ? 'white' : '',
borderColor: isHovering ? 'red': '',
borderWidth: isHovering ? '1px' : ''
}}
onm ouseEnter={handleMouseEnter}
onm ouseLeave={handleMouseLeave}
>
<Link onClick={imageClickable}>
<Image src='images/interest-2.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-3.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-4.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
</HStack><HStack pt='73px'>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-5.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-6.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}>
<Image src='images/interest-7.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
{/* <span onm ouseOver="this.style.color='red'" onm ouseOut="this.style.color='black'" > */}
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden"
>
<Link onClick={imageClickable}
style={{}}
>
<Image src='images/interest-8.png'
alt="Card Image"
>
</Image>
</Link>
</Box>
{/* </span> */}
</HStack>
<Box pt='53.11px' pb='12.87px'>
<Center>
{hasPickedTreeOrMore ? (
<MessageModal counter={counter} />
) : (
<Button
w='244.71px'
h='41.14px'
// colorScheme='orange'
bg={getColor()}
color='white'
borderRadius='8px'
p='10px' m='10px'
onClick={clickButton}
isDisabled={stopCounter()}
>
pick 3 more
</Button>
)}
</Center>
</Box>
</Stack>
</VStack>
)
}
export default SelectInterests;
CodePudding user response：
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.