How can I update a React component's image display after an Axios server call?

The issue is that you're updating a plain variable instead of using React state. React won't re-render the component if you modify a normal variable. Instead, you should use the useState hook to store the image value and update it using the state setter function. Additionally, it's best to perform the server call inside a useEffect hook so that it runs at the proper time in the component lifecycle.

Here’s an example of how you can modify your code:

JAVASCRIPTCopied
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Avatar from './Avatar';

export default function MyComponent({ id }) {
  const [image, setImage] = useState(null);

  useEffect(() => {
    const makeServerCall = {
      method: 'GET',
      url: `http://localhost:${id}`,
      headers: {
        'Content-Type': 'application/json'
      },
      json: true
    };
    
    axios(makeServerCall)
      .then((response) => {
        setImage(response.data);
      })
      .catch((error) => {
        alert(error);
      });
  }, [id]); // Dependency array: runs when id changes

  return (
    <div>
      <Avatar src={image ? `data:image/jpeg;base64,${image}` : ''} />
    </div>
  );
}

Explanation

• useState Hook:
  The image variable is now managed by React's state. Calling setImage updates the state and triggers a re-render of the component.

• useEffect Hook:
  The server call is performed inside useEffect so it runs when the component first mounts (or when the dependency changes).

• Dynamic JSX Value:
  The Avatar component will receive the updated image value once the server call completes and the state is set.

This approach ensures that when the response arrives, React knows to update the rendered HTML automatically with the new image value.