Im Trying To Render This Component
import styled from "styled-components"
import React from 'react'
import axios from "axios"
import { useState } from "react"
const Wrapper = styled.div`
display: flex;
background-color: gray;
width: 100%;
height: 50px;
border-color: white;
font-size: 10px;
border-style:dashed;
color: black;
`
const CollectionImage = styled.img`
position: relative;
top: 7px;
width: 30px;
height: 30px;
border-radius: 50%;
`
export default async function Collections({imgSrc,name,Price,symbol}) {
const res = await axios.get(`https://api-mainnet.magiceden.dev/v2/collections/${symbol}/stats`)
return (
<Wrapper key={symbol}>
<h3>Rank</h3>
<CollectionImage src={imgSrc} />
<h3>{name}</h3>
</Wrapper>
)
}
File I Try To Render The Component in :
const [Data,setData] = useState([])
const [solPrice,setsolPrice] = useState([])
useEffect(async()=>{
const res = await axios.get(('https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=50'))
setData(res.data)
axios.get("https://api.binance.com/api/v3/ticker/24hr?symbol=SOLUSDC"
).then((res)=>setsolPrice(Math.round(res.data.lastPrice * 100)/100)).catch((err)=> console.log(err))
})
return (
<Wrapper>
<Statbox>Sol/USD<br/>${solPrice}</Statbox>
<CollectionStats>
<h3>#</h3>
<h3>name</h3>
<h3>Floor Price</h3>
<h3>Avg Price</h3>
<h3>% Listed</h3>
</CollectionStats>
<CollectionsBox>
{ Data.map((collection)=> {
const symbol = collection.symbol
const name = collection.name
const imgSrc = collection.image
return (
<Collections symbol={symbol} name={name} />
)
})
}
</CollectionsBox>
</Wrapper>
)
}
export default Homer
Im trying to render the component in a mapping but im getting the error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead., if i manually create the component in the main file (the file below) and theres no error but i want to keep it in seperate files and it causes the error.
Your Collections component should not be an async function. Besides, if you want to fetch data when a component renders, you should use an useEffect hook.
Your component would be something like this:
export default function Collections({imgSrc,name,Price,symbol}) {
const [result, setResult] = useState();
// Here we are making an async call as soon as the component renders
useEffect(() => {
const asyncCall = async () => {
const res = await axios.get(`https://api-mainnet.magiceden.dev/v2/collections/${symbol}/stats`)
setResult(res);
}
asyncCall();
}, []);
// Here you can use "result" as you want, just remember that it's value is null until the request finishes.
return (
<Wrapper key={symbol}>
<h3>Rank</h3>
<CollectionImage src={imgSrc} />
<h3>{name}</h3>
</Wrapper>
)
}