I want to pass an image as a prop to another page

  javascript, react-hooks, react-router, reactjs

The main problem is that this image is selected from the file explorer and I am using react-router.
Add.js
this is where you select the image

import { Link } from "react-router-dom";
import About from "./About";
import './styles/modal.css'
import firebase from "firebase";
require("firebase/firestore")
require("firebase/storage")



export default function Add(props) {
    const [image, setImage] = useState(null);
    const [modal, setModal] = useState(false);

    const pickImage = (event) => {
        //console.log();
        setImage(URL.createObjectURL(event.target.files[0]));
        //console.log(image);
    }
    const toggle = () => {
        setModal(!modal);
    }

    return (
        <div>
            <h1>Add</h1>
            <button onClick={toggle}>Add image</button>
            {modal ? (
                <div className="modal-bg">
                    <div className="modal">
                        <img src={image} style={{ width: '60%', height: '60%' }} className="ex-img" />
                        <br /><br />
                        <label htmlFor="fie" className="gcoo btn-default">+ File
                            <input id="fie" type="file" onChange={pickImage} className="file-pick" />
                        </label>
                        <br />
                        <br />
                        <div className="bottom-buttons">
                            <Link to="/about">
                                <button className="save">Save</button>
                            </Link>
                            <button onClick={() => setModal(false)} className="closse">Close</button>
                        </div>
                    </div>
                </div>
            ) : null}
        </div>
    )
}

I am using firebase but not in this file so you can ignore this.
MainRoutes.js
this is where all the routes and pages are.

import { Route } from "react-router";
import { Switch } from 'react-router-dom';

import ImageDisplay from "./components/ImageDisplay";
import Add from './components/Add';

export default function MainRoute(props) {
    return (
        <Switch>
            <Route exact path="/about" component={() => <ImageDisplay />} />
            <Route exact path="/add" component={() => <Add />} /> 
        </Switch>
    );
}

finally this file ImageDisplay.js is where the image should be displayed
I dont have much on this file because i dont know how to put in any images.
I have tried props but whenever i imported the Imagedisplay it always showed the content on it and i dont want anything from image display. I only want to send an image over there.

import React from 'react'
import { Link } from "react-router-dom"

function ImageDisplay(props) {
    return (
        <div>
            <h1>image</h1>
            <div>
                <img />
                <p></p>
            </div>
        </div>
    )
}
export default ImageDisplay;

Source: Ask Javascript Questions

LEAVE A COMMENT