These instructions are a condensed version of a screencast on how to build JSX components from JSON.

Unlike the screencast, this script also shows how to simulate this in an Expo Snack. Jump to instructions for snack.

1. Records from data using Expo command line

You should only need to make changes to App.js, not Card.js. The technique is slightly different for a Snack, as indicated in section 2 at bottom.

Make sure your JSON is correct

• ⚠️ React Native has a nasty habit of caching JSON, so it's hard to update later. Before you do anything else, test your JSON with JSONlint.
• 🎗 Remember to end key-value lines with ", not ,"
• Add console.log() in your code if you suspect your JSON isn't loading.

Add hooks for loading and updating data

• In App.js, start at the very top by importing useState and useEffect, two React Native methods for accounting for new information.

import React, { useState, useEffect } from "react";

• useState creates a variable that when changed will automatically update on the screen.

import Card from "./components/Card";
export default function App() {
	const [pets, setPets] = useState( [] );
 	...

• useEffect is React Native's version of the Web's async and await. It waits for data to load from a server before painting it on the screen.
• useEffect takes an anonymous function as its parameter. (I'm using the arrow function syntax for this below.)
• This anonymous function should fetch the JSON and use .then to act once the JSON has arrived from the server.
• ⚠️ Don't put semicolons ; before lines followed by .then() statements. .then statements form one continuous chain. Only put one at the end.

export default function App() {
	const [pets, setPets] = useState( [] );
	useEffect(
		() => {
			fetch( "http://jonippolito.net/teaching/mobile_applications/pet_finder/json/pets2.json" )
			.then( response => response.json() )
			.then( setPets );
		}
	}
);

Replace the explicit list with a function to generate it

• In the JSX returned by the App function, replace each of the <Card>s with a function that will render them.
• Don't forget the parenthesis to trigger the function and the surrounding braces to tell React Native this is JavaScript in JSX.

import Card from "./components/Card";
export default function App() {
  const [pets, setPets] = useState([]);
  useEffect(() => {
    ...
  }
  return (
    <View style={styles.container}>
      <View style={styles.headerView}>
        <Text style={styles.headerText}>Pet Finder</Text>
      </View>
	    <ScrollView>{ renderPets() }</ScrollView>
    </View>
  );
}
const styles = StyleSheet.create({

Define this record-generating function

• Before the return statement with JSX, write a function that transforms the JSON array into individual <Card>s.
• ⚠️ You need to put const before your rendering function (no idea why).
• Note the parentheses () after the arrow inside the map function. This returns a result, whereas putting the contents in braces {} doesn't do squat.

export default function App() {
	const [pets, setPets] = useState([]);
	useEffect(() => {
		...
	}
	const renderPets = () => {
		return pets.map(
			pet => (
			  <Card
			    petName={pet.petName}
			    petImage={pet.petImage}
			    petLink={pet.petLink}
			  />
			)
		)
	}
	return (
		<View style={styles.container}>
			...

🐞 Problem: infinite loop

• Solution: add a second parameter to useEffect consisting of an array of the only parameters useEffect needs to check for updates before re-rendering the screen.

useEffect(
	() => {
    	...
	},
	[pets] // Only re-render if this JSON has changed.
);

🐞 Problem: missing keys

• React Native rule: "Each child in a list should have a unique 'key' property"
• Add a unique id to each record in your JSON; it can just be a version of the name for now.
• Then add a key based on this id to each <Card> in your generator function.

return pets.map(
	pet => (
		<Card
			key={pet.id} // Must be unique to each record.
			petName={ pet.petName }
			...
		/>
	)
);

🐞 Problem: can't update action

• "Can't perform a React state update on an unmounted component.
• Solution: add test for canceled update.

useEffect(
	() => {
		let didCancel = false;
		if ( !didCancel ) {
			fetch("http://jonippolito.net/teaching/mobile_applications/pet_finder/json/pets.json")
			.then( response => response.json() )
			.then( setPets );
		};
		return () => {
			didCancel = true;
		};
	},
	[pets]
);

🐞 Problem: old, class-based syntax

• useEffect and useState won't work with the old syntax:

export default class App extends React.component {
	render() {
		return(
			...
		)
	}
}

• Instead, reduce that unnecessary code to this simpler version:

export default function App() {
	return(
		...
	)
}

2. Records from data using Snack

Because Snacks are Web based, trying to fetch an external file without special headers can generate a CORS (Cross-Origin Resource Sharing) error. You can still simulate loading JSON by the following technique.

Make sure your JSON is correct

• ⚠️ React Native has a nasty habit of caching JSON, so it's hard to update later. Before you do anything else, test your JSON with JSONlint.
• 🎗 Remember to end key-value lines with ", not ,"
• Add console.log() in your code if you suspect your JSON isn't loading.

Add your JSON as a file in your Snack

• Create a new directory called data and a JavaScript file inside with the name of your JSON array (pets in this case).

			App.js
				|_data
					|_pets.js

• Inside your new JavaScript file, create a variable with the same name and set it equal to your JSON array. The contents of the variable pets should still validate as JSON; we're just putting that content in a variable so we can refer to it later.

export const pets = 
[
	{
	   "id": "grumpy_cat",
	   "petName": "Grumpy Cat",
	   "petImage": "https://s3.us-east-2.amazonaws.com/cat-demo-images/media/grumpy_thu.png",
	   "petLink": "https://en.wikipedia.org/wiki/Grumpy_Cat"
	},
	{
	   "id": "nyan_cat",
	   "petName": "Nyan Cat",
	   "petImage": "https://s3.us-east-2.amazonaws.com/cat-demo-images/media/nyan_cat_animated.gif",
	   "petLink": "https://en.wikipedia.org/wiki/Nyan_Cat"
	},
	...
]

Replace the explicit list with a function to generate it

• In the JSX returned by the App function, replace each of the <Card>s with a function that will render them.
• Don't forget the parenthesis to trigger the function and the surrounding braces to tell React Native this is JavaScript in JSX.
• Note that you don't need the useState code described above for this Snack technique (crossed out here).

import Card from "./components/Card";
export default function App() {
  const [pets, setPets] = useState([]);
    useEffect(() => {
      ...
    }
  return (
    <View style={styles.container}>
      <View style={styles.headerView}>
        <Text style={styles.headerText}>Pet Finder</Text>
      </View>
	    <ScrollView>{ renderPets() }</ScrollView>
    </View>
  );
}
const styles = StyleSheet.create({

Define this record-generating function

• Before the return statement with JSX, write a function that transforms the JSON array into individual <Card>s.
• ⚠️ You need to put const before your rendering function (no idea why).
• Note the parentheses () after the arrow inside the map function. This returns a result, whereas putting the contents in braces {} doesn't do squat.
• Again, you don't need the useEffect code described above for this Snack technique (crossed out here).

export default function App() {
   	const [pets, setPets] = useState([]);
			useEffect(() => {
				...
			}
	const renderPets = () => {
		return pets.map(
			pet => (
			  <Card
			    petName={pet.petName}
			    petImage={pet.petImage}
			    petLink={pet.petLink}
			  />
			)
		)
	}
	return (
		<View style={styles.container}>
			...

• Your App.js code should now look something like this.

import Card from "./components/Card";
export default function App() {
	const [pets, setPets] = useState([]);
	useEffect(() => {
		fetch(
			"http://jonippolito.net/teaching/mobile_applications/pet_finder/json/pets2.json"
		)
			.then(response => response.json())
			.then(setPets);
	}, [pets]);
	const renderPets = () => {
		return pets.map(pet => (
			<Card
				petName={pet.petName}
				petImage={pet.petImage}
				petLink={pet.petLink}
			/>
		));
	};
	return (
		<View style={styles.container}>
			<View style={styles.headerView}>
				<Text style={styles.headerText}>Pet Finder</Text>
			</View>
			<ScrollView>{renderPets()}</ScrollView>
		</View>
	);
}
const styles = StyleSheet.create({
	...

Import your JSON

• In App.js, import your local JSON variable (note the braces).
• Add an optional console.log if you want to check that your JSON array is loading.

import { pets } from "./data/pets.js" ;
export default function App() {
  const renderPets = () => {
    console.log("pets is " + pets.length) ; // Just a test to see if your JSON is loading.
    return pets.map(pet => (
      <Card
        petName={pet.petName}
        petImage={pet.petImage}
        petLink={pet.petLink}
      />
    ));
  ...
 }				

Now your cards should show up with the individualized content from your JSON. 🏁