text string must be rendered within a text component

Question

I'm getting this error I read some ways to fix it , but nothing worked

<View style={styles.container}> <StatusBar backgroundColor="transparent" translucent barStyle={theme.dark ? 'light-content' : 'light-content'} /> {open ? ( <DateTimePicker style={{width: '100%', margin: 5}} mode="date" value={date} dateFormat="day month year" display="calendar" onChange={handleDate} /> ) : ( <Button style={{margin: 5}} color="#17E5C2" onPress={() => { setOpen(true); }}> Filtrar por data </Button> )} {Object.values(JSON.parse(route.params.paramKey).message).map(item => Object.values(item.createdAt[0]).filter(actualDate => actualDate.includes(dateFilter) ? ( <Card mode="outlined" key={uuidv4()}> <Title>{item?.createdAt[0].value}</Title> <Button style={{alignItems: 'flex-start'}} color="#17E5C2" icon={ infoVisible ? 'arrow-up-bold-outline' : 'arrow-down-bold-outline' } mode="outlined" onPress={() => { handleInfo(); }}> Ver detalhes </Button> {Object.keys(item).map(data => ( <Card.Content key={uuidv4()} style={infoVisible ? {display: 'flex'} : {display: 'none'}} accessible={false}> <Paragraph style={{fontWeight: 'bold'}}>{data}</Paragraph> // {data} is a string as I checked in console.log <Paragraph>{item[data][0]?.value}</Paragraph> </Card.Content> ))} <Card.Actions> <Button color={'#17E5C2'}>Edit</Button> </Card.Actions> </Card> ) : ( console.log('NO ACTUAL DATA') // When I change console.log to a react child like(<Text>test</Text>) the error appear's instantly ), ), )} </View>

The error appear's when I choose a date that has data. I tried to put console.log besids react child , and when I put it appears to me the data. So I tought the error could be in my react childs.

I tried to fix my jsx conditional , but not worked , also tried to remove some commas , but also not worked, and I tried to use <> </> at the top and the end , but also not worked

Complete error message: Error: Text strings must be rendered within a <Text> component.

I tried the entire day so.... it's been dificulty , I want some tips about how to fix it.

It's my mistake , this is uselles im removing it , thanks for remind me, I edited it @Abe — Guilherme Cavenaghi
– Guilherme Cavenaghi, Commented Mar 6, 2022 at 4:16
Could you share the error message with us? @GuilhermeCavenaghi — Nick Vu
– Nick Vu, Commented Mar 6, 2022 at 8:14
<Paragraph style={{fontWeight: 'bold'}}>{data}</Paragraph> can you confirm data is a text. just console it — Rahman Haroon
– Rahman Haroon, Commented Mar 6, 2022 at 9:16

Nick Vu · Accepted Answer · 2022-03-07 01:57:56Z

One possible problem I can see from your code

Object.values(item.createdAt[0]).filter(actualDate => actualDate.includes(dateFilter) ? <YourComponent> : console.log('NO ACTUAL DATA'))

You're using filter instead of map for a ternary condition.

filter returns true/false value, so you shouldn't use it in this case

If you want to use it, the proper one could be

Object.values(item.createdAt[0]).filter(actualDate => actualDate.includes(dateFilter))

this.arjun · Accepted Answer · 2022-03-06 17:44:44Z

This error comes when you are not wrapping strings within the component or if you are you using some code formatter it sometimes add {" "} outside the components. Check for these scenarios within your components (P.s:- commenting out code component by component might save you some time)

I did this but the error continued , I also changed the ` console.log('NO ACTUAL DATA')` to <Text>test</Text> and the error appeared stantly

Collectives™ on Stack Overflow

text string must be rendered within a text component

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related