Develop Reference

text string must be rendered within a text component

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.

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

How can I map over an array, and have a button access the mapped array without being in the map

Project idea: Essentially a stackoverflow clone. I have a "question" (in my case a code error), and you can post potential solutions to that error.
My issue is while mapping over the array of of "solutions", my button is inside the map so it gets duplicated with every solution. How can I move the button outside the map but with it still having access to the mapped information?
This is in React, hooks.
Code:
{props.errors?.map((error, index) => (
<Card
key={index}
title={error.id}
extra={More}
style={{ width: 500 }}
>
<p>{error.errorMessage}</p>
<p>{error.errorType}</p>
{error.solutions.map((solution, index) => {
return (
<>
<SyntaxHighlighter
language={error.errorType.toLowerCase()}
style={rainbow}
>
{solution.solution}
</SyntaxHighlighter>
<Button
type="primary"
onClick={() => {
updateOn();
addSolution(solution);
}}
>
Add Solution
</Button>
</>
);
})}
</Card>
))}

Using a dictionary of color code values for CSS styles

I want to use a dictionary of HTML color codes and then map over that dictionary for styles.
For example:
const color = {
red: "#E53D25",
lightred : "#ED7462"
...
}
Here is my mapping function; I use index to iterate through the CSS values inside the dictionary above.
.map((stock, index) => (
<Grid>
<ListItem>
<ListItemAvatar>
<Avatar style={{ backgroundColor: color[index]}}>
{index + 1}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={stock.symbol}
secondary={financialData && financialData[5].filter((i) => i.symbol === stock.symbol).map(
filteredSymbol => (
<>
{filteredSymbol.company}
</>
))}
/>
</ListItem>
</Grid>
I try to iterating through the dictionary like this and apply color by index: style={{ backgroundColor: color[index]}}
But this does not work. How can I accomplish what I'm trying to build?

objects are not arrays that you can pass an index to access a value. you should provide a key matching string instead.
you would need to pass some stock property that resolves to a string that matches a color key:
// you could have a 'default' color key if stock.color is undefined
<Avatar style={{ backgroundColor: color[stock.color || 'default']}}>
thouh, given your structure you may want to create a function that takes a stock and returns a color for some logic built up on some stock property like:
const stockColor = (stock) => {
// example purposes
if (stock.value < 10) return color.red
if (stock.value < 30) return color.lightred
if (stock.value < 50) return color.yellow
return color.green
}
...
<Avatar style={{ backgroundColor: stockColor(stock)}}>

as you are mapping over an object( not an array), you need to implement mapping as sth like this:
Object.keys(color).map(function(key, index) {
////other part of your code
<Avatar style={{ backgroundColor: color[key]}}>
////other part of your code
});
you need to map over the keys of your object first, and then you would have access to the colors by color[key].

React throws an error while mapping the array of objects Error: Objects are not valid as a React child

I am trying to turn an array of the objects into jsx elements
const CardContainer = props => {
const { cars } = props;
const cards = cars.map((item, idx) => {
return (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={item.src} />
<Card.Body>
<Card.Title style={{ color: 'black' }}>{item.title}</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Get more info</Button>
</Card.Body>
</Card>
);
});
return(
{cards}
)
};
However, the App crashes and thorws an error - ×
Error: Objects are not valid as a React child (found: object with keys {cards}). If you meant to render a collection of children, use an array instead.

Instead of returning {cards} try returning simply cards. That should most probably solve the issue. The rest can only be identified when we have the full context of the code.

From React v16 it's possible for render() to return an array of elements. So you can simply return cards.
return cards;
Also don't forget to add key prop to mapping items.
<Card style={{ width: '18rem' }} key={idx}>

React js - how to assign result of a function to a state?

I have a question about react
currently in my app I want to get some data from server, and set default value of input, all of pulling is done in a function, but when I'm trying set state equal to function looks like react is thinking that I'm assigning function to state as a result on every input change state is being updated with function ignoring actual typing, is there a way to get past this?
Here is code for render part of component:
{metaList["properties"] &&
metaList["properties"].map((item, idx) => (
<label key={idx} style={{ display: "block", marginBottom: "20px" }}>
{item.name + ":"}
<div style={{ display: "none" }}>
{this.findMeta()
? (this.state.properties[item.name] = this.findMeta())
: ""}
{this.state.properties[item.name]
? this.state.properties[item.name]
: (this.state.properties[item.name] = "")}
</div>
<input
name={item.name}
placeholder={item.name}
value={this.state.properties[item.name]}
onChange={this.handleInputChangeProperties}
style={{
marginLeft: "20px"
}}
/>
</label>
))
}
this.findMeta is function I'm trying to call, nothing is special in it, function returns one variable as a string to get field filled.