CODEWITHSUNDEEP
jsonreact-native
user2026178
user2026178

Reputation: 318

Can't pull .json content from file using React-native

I am attempting to pull the contents of this .json file (colors.json). I don't really know what the issue is with my code. Can't figure out the correct call in the Text tag

react-native-cli: 2.0.1
react-native: 0.39.0

Quote.js

var colors = require('./colors.json');

class Quote extends Component {
    render () {
    return (
     <View style={styles.container}>
          <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text>
          **<Text style={styles.quote}> {colors.hexValue}</Text>**          
     </View>
    )
   }
}

Colors.json

{
    "colorsArray":[{
            "colorName":"red",
            "hexValue":"#f00"
        },
        {
            "colorName":"green",
            "hexValue":"#0f0"
        },
        {
            "colorName":"blue",
            "hexValue":"#00f"
        },
        {
            "colorName":"black",
            "hexValue":"#000"
        }
    ]
}

Image of Output (Edit)

enter image description here

Upvotes: 0

Views: 110

Answers (1)

max23_
max23_

Reputation: 6689

You need to perform a loop on the colors array in render() method to display each color's hexValue.

render () {
  return (
    <View style={styles.container}>
      <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text>
      {
        colors.colorsArray.map((color, index) => {
          return <Text key={index} style={styles.quote}>{color.hexValue}</Text>;
        })
      }        
    </View>
  );
}

Upvotes: 2

Related Questions