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.

CodePudding user response：

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))

CodePudding user response：

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)