I am trying to generate an array of streaming services for a new project.
I am new to React, so would like some help.
The code I am using to call everything is:
const [streamingState, setStreamingState] = useState({});
axios.request({ ...optionsParams,
params: { s: `${movieData.title}`}
})
.then(function (response) {
console.log(response.data);
const traktid = response.data.search[0].traktid;
const traktidOptions = {
...optionsParams,
params: { t: `${traktid}`
}
};
axios.request(traktidOptions).then(function (response) {
const streamingServices = response.data.streams;
const streamingServicesSet = streamingServices.map((streams) => ({
name: streams.name
}))
setStreamingState(streamingServicesSet);
console.log(streamingState);
and I want to return it in the return body with:
<div className='streaming' id="streaming">
<h3 style={{"marginRight" : "10px"}}>Available on: </h3>
{/* {streamingState.map((streams) => {return(<div>{streams.name}</div>)})} */}
{streamingState.name}
</div>
Does someone mind looking and seeing if you can help? I have tried multiple things and keep getting this error 'streamingState.map is not a function'
I believe the error occurs in the line const [streamingState, setStreamingState] = useState({});. Here you are defining the type of streamingState to be an object.
.map is a function for arrays only, and thus trying to map an object will result in an error.
If you would console.log(streamingState), you will be able to see the type, which from the looks of it might be an object. You'll want to change the type in your useState() line to an array of objects ie. const [streamingState, setStreamingState] = useState([{}]) and make sure that part is working correctly.