How can I do to show the pic? - reactjs

Question

I am trying to upload a image but when I try I don't see the image on the web page.
import "./styles.css";
const App = () => {
return (
<div className="grid bg-white rounded-lg shadow-xl w-11/12 md:w-9/12 lg:w-1/2 h-1 w-1">
<div className="grid grid-cols-1 mt-5 mx-7 h-3 w-3">
<label className="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1">
Upload Photo
</label>
<div className="flex items-center justify-center w-full">
<label className="flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group">
<div className="flex flex-col items-center justify-center pt-7">
<svg
className="w-10 h-10 text-purple-400 group-hover:text-purple-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
<p className="lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider">
Select a photo
</p>
</div>
<input type="file" className="hidden" />
</label>
</div>
</div>
</div>
);
};
export default App;
Here is my code : Code
I don't undertand how I can do to see the picture after selected the pic.
Could you help me please ?
Thank you very much !

Answer 1

Update:
Your code sandbox working
The short answer is you set the src attribute of the image tag to URL.createObjectURL(photo) where photo is the file that was selected by the form input: event.target.files[0].
Here's my code:
import React, { useState } from 'react'
import logo from '../static/logo.svg'
type FormSubmitFunction = (formdata: React.FormEvent<HTMLFormElement>) => Promise<void>
interface LandingPageProps {
handleSubmit: FormSubmitFunction
}
const LandingPage = ({ handleSubmit }: LandingPageProps) => {
const [photo, setPhoto] = useState<File>()
return (
<div className='flex flex-col items-center max-w-sm mx-auto'>
<div className='w-5/12 mt-3 sm:mt-4'><img src={logo} alt='logo' /></div>
<form className='w-full' onSubmit={handleSubmit}>
<div>
<div className="w-11/12 mx-auto">
<div className={photo ? 'hidden' : 'block'}>
<h1 className='m-6 text-lg font-bold text-center'>Please upload a photo</h1>
<input
id="photoupload"
name="photo"
type="file"
required
placeholder="Upload photo"
accept="image/gif, image/jpeg, image/png"
className="block w-full px-3 py-2 mx-auto mt-2 text-base placeholder-gray-600 bg-white border-2 border-gray-300 shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none focus:ring-0"
onChange={
(event) => {
event.target.files && setPhoto(event.target.files[0])
}
}
/>
</div>
<div className={photo ? 'block' : 'hidden'}>
<h1 className='m-6 text-lg font-bold text-center'>Success! Thanks.</h1>
<img src={photo ? URL.createObjectURL(photo) : undefined} alt={photo ? photo.name : undefined} />
</div>
</div>
</div>
</form>
</div >
)
}
export default LandingPage
OK ... I updated your code sandbox.
Past this into App.js and it works...
import "./styles.css";
import React, { useState } from "react";
const App = () => {
const [photo, setPhoto] = useState();
return (
<div className="grid bg-white rounded-lg shadow-xl w-11/12 md:w-9/12 lg:w-1/2 h-1 w-1">
<div className="grid grid-cols-1 mt-5 mx-7 h-3 w-3">
<label className="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1">
Upload Photo
</label>
<div className="flex items-center justify-center w-full">
<label className="flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group">
<div className="flex flex-col items-center justify-center pt-7">
{photo && (
<img src={URL.createObjectURL(photo)} alt={photo.name} />
)}
{!photo && (
<svg
className="w-10 h-10 text-purple-400 group-hover:text-purple-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
)}
<p className="lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider">
Select a photo
</p>
</div>
<input
type="file"
className="hidden"
onChange={(event) => {
event.target.files && setPhoto(event.target.files[0]);
}}
/>
</label>
</div>
</div>
</div>
);
};
export default App;