Render out random object from array from fetch - reactjs

Question

I have 250 objects in the array i get from the axios get request, if i want to render out only 100 of the 250 objects but i want it to always be random can i do something like this
array.[Math.floor(Math.random()*items.length)]?
Here is my code.
export default function App() {
const [data, setData] = useState([])
const [searchCountry, setSearchCountry] = useState('')
const getData = async () => {
const { data } = await axios.get(`https://restcountries.com/v3.1/all`)
setData(data)
}
useEffect(() => {
getData()
}, [])
return (
data && (
<div className="App">
<SomeContext.Provider
value={
<h2>
<input
className="search-country"
placeholder="Search Country..."
onChange={(event) => {
setSearchCountry(event.target.value)
}}
/>
<ul id="countries-ul">
{data
.filter((country) => {
if (searchCountry === '') {
return country
} else if (
country.name.common
.toLowerCase()
.includes(searchCountry.toLowerCase())
)
return country
})
.map((country) => (
<li className="li-card" key={country.name.common}>
<Link to={`/country/${country.name.common}`}>
{country.name.common}
</Link>
</li>
))}
</ul>
</h2>
}

Answer 1

You can iterate your logic Math.floor(Math.random() * data.length) (which will pick a single item randomly in the array) 100 times. Be sure to remove a item in a array when it is picked if you don't wait it to be duplicated.
const getData = async () => {
const { data } = await axios.get(`https://restcountries.com/v3.1/all`)
const LENGTH = 100;
const picked = [];
for (var i = 0; i < LENGTH; i++) {
const index = Math.floor(Math.random() * data.length); // pick a item randomly
const removed = data.splice(index, 1); // remove it for preveting duplication
picked.push(removed[0]);
}
setData(picked);
}