Process of showing datas to client [React]

Questions

• How to get datas from the backend.
• How to pass the data between components
• How to show data.

Process of showing datas to client.

How to get datas form the backend

Use "Axios"(is a lightweight HTTP client based on the XMLHttpRequest service).
you can request and can get datas by using "Axios" and API.

const [Product, setProduct] = useState([])

useEffect(() => {
    Axios.get(`/api/product/products_by_id?id=${productId}&type=single`)
        .then(response => {
            setProduct(response.data[0])
        })
}, [])

This 'useEffect()' gets a product by productId and store(setProduct) data. The data we requested with 'axios.get' is in the 'response'. so we should use this response. Above code save data to state using "useState" hooks.

how,where to store that datas

React stores datas to "state". To do that usually use useState hook

// define useState hook, first value is variable name and second is function name
const [Product, setProduct] = useState([])

// useing useState hook
setProduct(valuesYouWantToStore)

How to pass the data between components

use state? props?

Use props. Pass the data what you want as a value of component

<ProductImage detail={Product} />

<ProductInfo detail={Product} />

How to show datas.

It is usual things. use html or jsx