I've set out to create my first solo react app and running into some issues with dynamic content. Below, I dynamically output buttons off a map method from local JSON data (simulating a DB call for down the road). The buttons generate the way I want, but I want to pass their key/id to another component that will output the rest of the data (like a user profile page). I am stuck on how to get the value from the button to the next component <Animal /> that is hidden with a modal state. The idea is to pass the key/id and for the component to populate data from that specific JSON index.

import React, { useState, Fragment } from 'react';
import adata from '../data/AData.json'
import Animal from './Animal'

const AnimalList = () => {
    const [show, hide] = useState (false);   

    return(   

        <div>
            {
            adata.adata.map(
                adata => <div key={adata.id} id={adata.id}>
                            <button onClick={() => hide(true)}>{adata.name}</button>
                        </div>) 
            }
            <Fragment>
                <div>
                    {show ? <Animal />: null}
                </div>
            </Fragment>
        </div>
        ) 
}

export default AnimalList;