Generating a single JSON record in React Native

Need help displaying a single JSON record from an API request on the screen.

 const [user, setUser] = useState();
   const getUserData = async () => {
    // {headers: {Authorization: "Basic " + base64.encode(username + ":" + password),}}
    try {
      const response = await fetch('http://*******/warrant/' + route.params.id, {headers: {Authorization: "Basic " + base64.encode(username + ":" + password),}});
      json = await response.json();
      
      setUser(json.warrant);
    } catch (error) {
      console.error(error);
    }
  };



useState(() => {
    getUserData();
  }, []);

 return (
    <View >
      <View >
        <Text style={styles.input2}>name:</Text>
      <Text style={styles.input} value={user.name}>{user.name}</Text>
      </View>

Error: undefined is not an object (evaluating 'user.name')

Sample JSON data:

{"warrant": {"dateend": "1", "datestart": "1", "description": "1", "fio": "1", "id": 2, "image": "", "name": " 3", "number": "4", "numberitem": "4", "state": 2}}

Answer №1

Utilizing

const [user, setUser] = useState();
in your code invokes the useState function with no arguments. As a result, user is undefined by default and should not be accessed for safety reasons. To address this issue, consider the following solutions:

  1. To safely access the name property, use user?.name instead of user.name
  2. Set a default object for user by using:
    const [user, setUser] = useState({});

For further information, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use promises instead of directly calling res.json(data) when working with Node.js

When I make a post request to the payment_url, it triggers the second block of my function. Unfortunately, I am unable to retrieve any data in the then method because I am unsure how to pass the data back to the resolve function. Client-side call paypal. ...

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

Exclude a variety of keys using wildcards or regex when conducting comparisons

How can I exclude certain properties in a JSON object that contain specific characters? var obj1 = {name: "James", age: 17, creation: "13-02-2016", deletion: "13-04-2016", foo_x:"", foo_y:"", foo_z:""} var obj2 = {name: "Maria", age: 17, creation: "13-02- ...

Is there a way to determine if a click occurred outside of a div without relying on stopPropagation and target event?

My goal is to track multiple div elements and determine if a click occurs outside of any of these divs. I am looking for a solution that does not involve using stopPropagation or event.target as they have negative effects. Is there an alternative method to ...

Node.js with Socket.io causes multiple events to be triggered

Currently, I am in the process of developing a rochambo game using node.js and socket.io. The game works as follows: A player places a bet, which is then sent to all other players. These players can choose a sign and click on 'challenge'. Howeve ...

Experiencing difficulties when trying to invoke a SQL stored procedure called SelectById through Express

In my node application, I am encountering an issue when trying to call a saved stored procedure from SQL. While I can successfully execute the selectRandom5 saved proc without any problems, I run into trouble when attempting to use getById and declare the ...

A step-by-step guide on duplicating the functionality of the jQuery

Issue at Hand: I'm attempting to recreate the functionality of jQuery's ajax method as I find myself utilizing XMLHttpRequest multiple times within a script. However, I am hesitant to include jQuery as a dependency since I only require a few meth ...

Can you explain the distinction between compiled and interpreted programming languages?

Despite my efforts to research the topic, I am still confused about the distinction between a compiled language and an interpreted language. It has been mentioned that this is one of the distinguishing factors between Java and JavaScript. Can someone ple ...

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

Eliminate unnecessary CSS classes from libraries such as bootstrap when working on a React project

Our team is currently in the process of developing a React project that involves webpack and babel. Our goal is to automatically remove any unused CSS classes from CSS frameworks Bootstrap and AdminLTE 2, which are integral parts of our project. For this ...

Guide on setting up and customizing run.json within the latest JetBrains Fleet for Next.js

I've been attempting to set up input/output for the latest IDE from JetBrains, Fleet. However, I've hit a roadblock and can't seem to figure it out on my own. That's why I'm turning to the Stack Overflow community for help - how do ...

Discovering the most recently selected element in jQuery

Currently reading a jQuery tutorial from the Head First series and practicing with an example where I need to identify the last selected element. In Chapter 2, there is a task involving four images on a page. When a user clicks on any of these images, the ...

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

Currently, I am attempting to create a javascript regex that can extract decimal numbers from a string containing a mix of characters. Here are some examples of the mixed strings: mixed string123,456,00indeed mixed string123,456.00indeed mixed string123,4 ...

What are the benefits of storing dist in both a GitHub repository and on npm?

I'm curious about why some repositories include a dist folder. Shouldn't repositories just store source code and not any builds or compiled files? Let's take a look at an example with ES6 code. package.json { "files": [ "dist", ...

Enforcement of Typescript Field Type Lax During Assignment

My current issue involves a constructor that is supposed to set the value of _device. The field is specifically designed to be of type number, and the constructor parameter is also expected to be of type number. However, when a parameter of type string is ...

The loading of content will happen only after the fadeOut effect

I'm attempting to incorporate content loading between fadeOut and fadeIn. When I execute the code below, the content loads before the fadeOut is complete: $("#contentArea").fadeOut(1000); $("#contentArea").promise().done(); $("#contentArea").load(c ...

Learning the process of accessing a JSON file from a different directory

I am faced with a straightforward folder structure, it looks like this: project │ └───data │ file.json │ └───js test.js My goal is to access the content of file.json within the test.js file in order to perform some ...

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

Transferring information from the main function to getServerSideProps

I've been facing challenges while trying to pass data from a function component to the getServerSideProps method in Next.js. As a beginner in learning Next.js, I am struggling to understand this concept. My approach involves using context from _app, b ...