CODEWITHSUNDEEP
react-native
program_bumble_bee
program_bumble_bee

Reputation: 305

Add dynamic background color to view from state react native

I have a parent view container that has three child views with different background colors. The background colors I want to set to the views is stored as values in state.

I need to achieve something like this:

enter image description here

This is my code snippet:

 this.state={
            myData:[],
            color:["#27AE60", "#3498DB", "#E67E22","#E74C3C","#DAF7A6"]
        }

render(){
const oem_color = this.state.color.map((i,e) => {

            return(
                <View key={i} style={{width:15, height:15, borderRadius:50, backgroundColor: {i.color}}} />
            )
        })

return (    
            <View>
            </View>
       )

Please help to solve it.

Upvotes: 0

Views: 647

Answers (3)

Ovais Butt
Ovais Butt

Reputation: 253

One more way of doing this is with Flatlist Just pass this state in data of flatlist

<FlatList 
data={this.state.color} 
renderItem={(item, index) => {
return (
<View
      key={index}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: item,
      }}
    />
)}}

Upvotes: 2

nipek
nipek

Reputation: 850

this.state = {
  myData:[],
  color:["#27AE60", "#3498DB", "#E67E22","#E74C3C","#DAF7A6"]
}

render(){
  const oem_color = this.state.color.map((i,e) => {
    return(
      <View key={i} style={{width:15, height:15, borderRadius:50, backgroundColor: {i.color}}} />
     )
  })

  return (    
    <View>
    </View>
)

you dont need curly bracket inside the style and the array is not an array of object so i.color will be undefined, check you restructured code below

state = {
  myData: [],
  color: ['#27AE60', '#3498DB', '#E67E22', '#E74C3C', '#DAF7A6'],
};

render() {
  const oem_color = this.state.color.map((color, index) => (
    <View
      key={i}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: color,
      }}
    />
  ));
  return <View>{oem_color}</View>;
}

Upvotes: 1

Junius L
Junius L

Reputation: 16122

Color is an array of string colors not object, you don't have to do i.color 

const oem_color = this.state.color.map((color, e) => {
  return (
    <View
      key={color}
      style={{
        width: 15,
        height: 15,
        borderRadius: 50,
        backgroundColor: color,
      }}
    />
  );
});

Upvotes: 2

Related Questions