How can I show the uploaded image in React? - reactjs

Question

I'm going to upload an image with react now. When I selected the image and received the value of the selected image in state, I got an array like below. But how do I approach this array to see this selected image? If you look at the picture, there is no path to the picture in the array, so I want to know which value to choose to see the picture. I'd appreciate it if you let me know, thanks.
import React from 'react'
import { useState } from 'react';
import styled from 'styled-components';
function MakeModal() {
const fileInput = React.useRef(null);
const [isfile,setIsfile] = useState("");
const handleButtonClick = e => {
fileInput.current.click();
};
const handleChange = e => {
setIsfile(e.target.files[0]);
console.log(e.target.files[0]);
};
const objectUrl = URL.createObjectURL(isfile);
console.log('check',objectUrl)
return (
<Modal>
<div>
<div>
<div>
<div>
<input
type="file"
style={{display:'none'}}
ref={fileInput}
onChange={handleChange}
multiple={true}/>
<button
className='box9_2_3_3_2'
onClick={handleButtonClick}>
choose img
</button>
</div>
</div>
</div>
</div>
</Modal>
)
}
export default MakeModal;
const Modal = styled.div`
display: ${props=>props.isModal===true?'block':'none'};
position: fixed;
background-color: rgba(0,0,0,0.65);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 500343;
.box9_2_3_3_2 {
background-color: rgb(0,149,246)!important;
border: 1px solid transparent;
border-radius: 4px;
color: white;
position: relative;
-webkit-appearance: none;
background: none;
box-sizing: border-box;
cursor: pointer;
display: block;
}
`

Answer 1

You only need to create an ObjectUrl from your file like this :
const objectUrl = URL.createObjectURL(file); // or file[0] if it's an array
...
<img src={objectUrl} ... />
...
A good practise is to revoke the URL when the compenent unmount, or when the file change. One exemple is to do it like this, it depends on your logic :
const [isFile, setIsFile] = useState('');
const [preview, setPreview] = useState('');
useEffect(() => {
if (isFile) {
const objectUrl = URL.createObjectURL(isFile); // create here
setPreview(objectUrl);
}
return () => URL.revokeObjectURL(isFile); // And revoke on unmount
}, [isFile]); // or whatever you called the variable you put the file in
return (
...
<img src={preview} ... />
...
)