ReactDOM

import React from "react";
import cat from "./cat.jpg";
import cow from "./cow.jpg";
import deer from "./deer.jpg";
import dog from "./dog.jpg";
import elephant from"./elephant.jpg";
import rabbit from "./rabbit.jpg";
import ReactDOM from "react-router-dom/client";
import ViewPage from "./ViewPage";

function AnimalesPage()
{
const handleImageClick=(evt)=>{
const root=ReactDOM.creactRoot (document.getElementById("root"));
if(evt.target.name=="imgcat")
{
root.render(<ViewPage Picname={cat}></ViewPage>);
}
else if(evt.target.name=="imgcow")
{
root.render(<ViewPage Picname={cow}></ViewPage>);
}
if(evt.target.name=="imgdeer")
{
root.render(<ViewPage Picname={deer}></ViewPage>)
}
else if(evt.target.name=="imgdog")
{
root.render(<ViewPage Picname={dog}></ViewPage>)
}
if(evt.target.name=="imgelephant")
{
root.render(<ViewPage Picname={elephant}></ViewPage>)
}
else if(evt.target.name=="imgrabbit")
{
root.render(<ViewPage Picname={rabbit}></ViewPage>)
}

}

    return(
        <div>
            <h1>LIST OF INDIAN ANIMALES </h1>
            <table>
            <tr>
                <td>
                    <img src={cat} height="100" width="100" name="imgcat" onClick={handleImageClick}/> 
                </td>
                </tr>
                <tr>
                    <td>
                        <img src={cow} height="100" width="100" name="imgcow" onClick={handleImageClick}/>
                    </td>
                </tr>
                <tr>
                    <td>
                    <img src={deer} height="100" width="100" name="imgdeer" onClick={handleImageClick}/>

                    </td>
                </tr>
                <tr>
                    <td>
                    <img src={dog} height="100" width="100" name="imgdog" onClick={handleImageClick}/>

                    </td>
                </tr>
                <tr>
                    <td>
                    <img src={elephant} height="100" width="100" name="imgelephant" onClick={handleImageClick}/>

                    </td>
                </tr>
                <tr>
                    <td>      
                    <img src={rabbit} height="100" width="100" name="imgrabbit" onClick={handleImageClick}/>

                    </td>
                </tr>
            </table>
        </div>
    );

}export default AnimalesPage;