Category: JavaScript

To fix unable to fetch data from local JSON file with axios and React, we put the local JSON file in the public folder of our React project.

Then we call axios.get with the relative path to the JSON file.

For instance, we write

const handleSubmit = async (e) => {
  e.preventDefault();
  //...
  const { data } = await axios.get("./data.json");
  //...
};

to call axios.get with './data.json to get the content of data.json in the public folder in our React project.

To fix the validateDOMNesting warning with React, we shouldn’t nest anchor element in another anchor element.

For instance, we write

navigate = () => {
  //...
};

<div onClick={this.navigate}>
  <Link to="path2">Some button</Link>
  <Link to="path3">Some button</Link>
</div>

to add 2 React Router Links which render to anchor elements.

And then we set onClick on the div to the navigate method which navigates to another route programmatically.

Then we don’t have any nested anchor elements.

To fix the "Invalid prop ‘source’ supplied to Image" error with React-Native Image, we set the source prop of the Image component to the value returned by calling require with the image path.

For instance, we add the Image by writing

<Image source={require("./my-icon.png")} />;

We set the source to the value returned by require to add the image at my-icon.png.

To pass params to tab navigator React Navigation 5, we create a context and set put the value we want in the context.

Then any component inside the context provider can access the value.

For instance, we write

export const NetworkContext = React.createContext();

to create the NetworkContext and export it.

Then we write

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen
          name="NetworkPosts"
          component={NetworkPostsScreen}
        />
        <PostsTabNav.Screen
          name="NetworkUsers"
          component={NetworkUsersScreen}
        />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

to create the PostsTabNav with createMaterialTopTabNavigator.

And then we wrap NetworkContext.Provider around the PostsTabNav components and set the context value to route.params.network.

Then the PostsTabNav components can access route.params.network with the context.