# Fetch

We're still in `front/src/App.js`. We want these contacts to show in our React app.

Here's how it should go:

1. React loads the component
2. React initializes the component
3. React inserts the component in the page
4. React runs the component's `onComponentDidMount` method
5. React waits for user input

We're concerned by step #4. We want to load the data when the component exists, is ready for use, and has been inserted in the page.

Let's try. Inside the component, you'll add a `componentDidMount` method, in which you will try to load the contacts, and add them to the component's `state`:

```javascript
...
class App extends React.Component {
  state = { contacts_list:"" }
  componentDidMount(){
    const getList = async()=>{
        const response = await fetch('//localhost:8080/contacts/list')
        const text = await response.text()
        this.setState({contacts_list:text})
    }
    getList();
  }
  render() {
    ...
  }
}
...
```

Open the react dev tools in your inspector, and drill down the components until you reach your `App` component. Check out the state, and verify it is, actually, getting filled with the contacts it is loading from the back-end.

Let's now show those contacts in the generated html.

Add something to show the contacts to the `render` function:

```javascript
...
class App extends React.Component {
  render() {
    const { contacts_list } = this.state
    return (
      ... previous stuff
      // if using react-native-web
      <Text style={styles.text}>{contacts_list}</Text>
      // otherwise:
      <p>{contacts_list}</p>
      ...
    );
  }
}
...
```

Save, and verify React is actually displaying the contacts.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codi.gitbook.io/docs/02_tutorials/01_react_beginner/enhancements/06-fetch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.