I'm trying to understand somebody else code,
I have this component:
import React from 'react';
import { useEffect, useState } from 'react';
export default function CountriesList({ searchValue }) {
const [data, setData] = useState([])
//Onmount
useEffect(() => {
async function init() {
//API Calls- request data from the server
const response = await fetch('https://restcountries.com/v2/all');
const body = await response.json();
setData(body);
}
init()
}, [])//dependencies array
return (
<div className="countries-container">
{data
.filter(country => country.name.toLowerCase().includes(searchValue.toLowerCase()))
.map((country) => {
const { name, flag } = country;
return (
<div key={name} className="country-container">
<h3 className="title">{name}</h3>
<img src={flag} height="100px" width="100px" alt="flag" />
</div>
)
})}
</div>
)
}
inside init(), the programmer call init() again, can you explain why?
I tried to look for this style of programming and I didn't find anything.
whiteout this line the API call doesn't work.
thank you!
I may be mistaken, but as far as I can see, init function is declared and called right after declaration.
Check this out: https://github.com/facebook/react/issues/14326
Related
I want to use useEffect(on mount) to fetch from API and store it in useState. Fetch API is used to get the data. The problem is when initial page loading and also when I reload the page, it outputs an error called test.map is not a function. Why this happening and how to avoid this ?
import { useEffect, useState } from 'react';
function App() {
const[test, setTest] = useState({})
useEffect(() => {
testfunc()
}, [])
async function testfunc(){
let api = await fetch('https://jsonplaceholder.typicode.com/users')
let apijson = await api.json()
setTest(apijson)
}
return (
<div className="App">
{
test.map((item) => {
return(
<div>
{item.name}
</div>
)
})
}
</div>
);
}
export default App;
You can't map on an object {}, so you should need to define an array [] for the base state :
const[test, setTest] = useState([])
You have to change {} to array first to be able to map over it. You can easily place ? after test like this. or make in the default value of the state a default value for item name. because this error results as you map over an empty object.
import { useEffect, useState } from 'react';
function App() {
const[test, setTest] = useState([{name:"default"}])
useEffect(() => {
testfunc()
}, [])
async function testfunc(){
let api = await fetch('https://jsonplaceholder.typicode.com/users')
let apijson = await api.json()
setTest(apijson)
}
return (
<div className="App">
{
test?.map((item) => {
return(
<div>
{item.name}
</div>
)
})
}
</div>
);
}
export default App;
As already mentioned, you can't use the .map for objects.
Instead of this, you can make something like that
Object.keys(test).map(key => {
const currentSmth = test[key]
return(
<div>
{currentSmth.name}
</div>
)
})
})
I think it helps you to solve your problem.
Be careful using the correct data structures and methods.
This question already has answers here:
Using async/await inside a React functional component
(4 answers)
Closed 7 months ago.
I was given a snippet of a class named GithubService. It has a method getProfile, returning a promise result, that apparently contains an object that I need to reach in my page component Github.
GithubService.ts
class GithubService {
getProfile(login: string): Promise<GithubProfile> {
return fetch(`https://api.github.com/users/${login}`)
.then(res => res.json())
.then(({ avatar_url, name, login }) => ({
avatar: avatar_url as string,
name: name as string,
login: login as string,
}));
}
export type GithubProfile = {
avatar: string;
name: string;
login: string;
};
export const githubSerive = new GithubService();
The page component should look something like this:
import { githubSerive } from '~/app/github/github.service';
export const Github = () => {
let name = 'Joshua';
const profile = Promise.resolve(githubSerive.getProfile(name));
return (
<div className={styles.github}>
<p>
{//something like {profile.name}}
</p>
</div>
);
};
I'm pretty sure the Promise.resolve() method is out of place, but I really can't understand how do I put a GithubProfile object from promise into the profile variable.
I've seen in many tutorials they explicitly declare promise methods and set the return for all outcomes of a promise, but I can't change the source code.
as you are using React, consider making use of the useState and useEffect hooks.
Your Code could then look like below, here's a working sandBox as well, I 'mocked' the GitHub service to return a profile after 1s.
export default function Github() {
const [profile, setProfile] = useState();
useEffect(() => {
let name = "Joshua";
const init = async () => {
const _profile = await githubService.getProfile(name);
setProfile(_profile);
};
init();
}, []);
return (
<>
{profile ? (
<div>
<p>{`Avatar: ${profile.avatar}`}</p>
<p>{`name: ${profile.name}`}</p>
<p>{`login: ${profile.login}`}</p>
</div>
) : (
<p>loading...</p>
)}
</>
);
}
You should wait for the promise to be resolved by either using async/await or .then after the Promise.resolve.
const profile = await githubSerive.getProfile(name);
const profile = githubSerive.getProfile(name).then(data => data);
A solution would be:
import { githubSerive } from '~/app/github/github.service';
export async function Github() {
let name = 'Joshua';
const profile = await githubSerive.getProfile(name);
return (
<div className={styles.github}>
<p>
{profile.name}
</p>
</div>
);
}
But if you are using react, things would be a little different (since you have tagged reactjs in the question):
import { githubSerive } from '~/app/github/github.service';
import * as React from "react";
export const Github = () => {
let name = 'Joshua';
const [profile, setProfile] = React.useState();
React.useEffect(() => {
(async () => {
const profileData = await githubSerive.getProfile(name);
setProfile(profileData);
})();
}, [])
return (
<div className={styles.github}>
<p>
{profile?.name}
</p>
</div>
);
}
I finally got a function to compile, but when I call it from within an event handler errors start flying!
The calling code and function is below.
The objective was to get a function to return a 'assettype' as a string and use that String to make a make routing decision.
What am I missing here?
Any chance of some guidance.
Here are the errors:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)dom16.14.0 and react 64.2
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
▶ 2 stack frames were collapsed.
...
GetAssetTypeNameFunction
C:/React-Springboot-CRUD-App/react-frontend/src/Services/GetAssetTypeNameFunction.js:7
const GetAssetTypeNameFunction = (props) =>{
const { assettype_assettypeId } = props;
> const [assetType,setAssetType] = useState()
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data));View compiled
ListAssetsComponent.editAssets
C:/React-Springboot-CRUD-App/react-frontend/src/components/ListAssetsComponent.jsx:62
editAssets(assetsid,assettype_assettypeId){
> if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower")
{
this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
}
...
Button in a Rendered List. onClick calls code that references function 'GetAssetTypeNameFunction'
...
<button onClick={ () => this.editAssets(assets.assetsid, assets.assettype_assettypeId)} className="btn btn-info">Update </button>
editAssets(assetsid,assettype_assettypeId){
if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower")
{this.props.history.push(`/add-assetstower${assetsid}/this.props.match.params.sitemasterid`);}
}
...
Finally the GetAssetTypeNameFunction function that is called:
...
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const GetAssetTypeNameFunction = (props) =>{
// destructuring
const { assettype_assettypeId } = props;
const [assetType,setAssetType] = useState()
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data));
const arrayMap = assetType.map((post)=>{
return(
<ul>
{post.assettypeName}
</ul>
);})
return (
{arrayMap}
);
}
export default GetAssetTypeNameFunction;
...
I am new to the use of functions. I saw a reference that said: "Do not call in event handlers".
try this
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const GetAssetTypeNameFunction = (props) =>{
const { assettype_assettypeId } = props;
const [assetType,setAssetType] = useState([])
useEffect(() => {
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data)).catch((error) => {
console.error('Error:', error);
});
}, [])
return (
<>
{
assetType.length > 0 ? assetType.map((post) => {
<ul>
{post.assettypeName}
</ul>
})
:
null
}
</>
)
export default GetAssetTypeNameFunction ;
Here is the where I am having the problem,
const handleCLick = () => {
const parsedId = getYouTubeID(videoLink);
console.log(parsedId);
setVideoId(parsedId);
console.log(videoId);
}
Here when I am trying to log the 'parsedId' it logs the data correctly
ioNng23DkIM
And after using the setVideoId() function when I try to log the value it returns undefined
undefined
Here is a snap shot of the log output.
Home.js code:
import React, { useRef, useState } from "react";
import { Link } from "react-router-dom";
import getYouTubeID from 'get-youtube-id';
function Home(props) {
const [videoLink, setVideoLink] = useState();
const [isBool, setBool] = useState(false);
const [videoId, setVideoId] = useState();
const urlRef = useRef();
const handleChange = (event) => {
setVideoLink(event.target.value);
if (urlRef.current.value === '') {
alert('Please enter a URL');
setBool(true);
} else {
setBool(false);
}
}
const handleCLick = () => {
const parsedId = getYouTubeID(videoLink);
console.log(parsedId);
setVideoId(parsedId);
console.log(videoId);
}
return (
<section className="homeLayout">
<div className="logo-display">
<img className="logo-img" alt="logo" src="./logo.png" />
<h1>WatchIt</h1>
</div>
<div className="searchlayer">
<form>
<input ref={urlRef} id="videoLink" placeholder="Enter the youtube video URL:" onBlur={handleChange} required />
<Link style={{ pointerEvents: isBool ? 'none' : 'initial' }} to={`/play?=${videoId}`} onClick={handleCLick}>Play</Link>
</form>
</div>
</section>
);
}
export default Home;
You can use useEffect to solve your problem.
Use effect will listen to you state change n then you can perform logic in there.
The problem you're facing is because setState will set the value eventually, not immediately (Usually this means the update will be visible when the component is rendered again). If you want to do something after the value is set, you need to use useEffect.
Splitting your handleClick we get,
const handleCLick = () => {
const parsedId = getYouTubeID(videoLink);
console.log(parsedId);
setVideoId(parsedId); // Queue the change for `videoId`
}
useEffect(() => {
console.log(videoId);
}, [videoId]); // Call this function when the value of `videoId` changes
I've retrieved a list of categories using an API. Now I want to fetch images from an URL based on the categories. I tried using each category to fetch images from another API, but I'm not sure how to do it.
import React, { useEffect, useState } from 'react';
import './css/Category.css';
function Category() {
useEffect(() => {
fetchData();
getImage();
}, []);
const [categories, setCategories] = useState([]);
const [image, setImage] = useState('');
const fetchData = async () => {
const data = await fetch('https://opentdb.com/api_category.php')
const categories = await data.json();
console.log(categories.trivia_categories)
setCategories(categories.trivia_categories)
}
const getImage = async (name) => {
console.log(name)
const q = name.split(' ').join('+')
const img = await fetch(`https://pixabay.com/api/?key=apikey&q=${q}&image_type=photo`)
const image = await img.json();
console.log(image)
setImage(image.previewURL)
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category">
{category.name}
<img src={getImage(category.name)} /> //do not know what to do here to fetch image of the respective category
</div>
))}
</div>
</div>
)
}
export default Category;
After changes suggested by Noah, I was able to show only one image.
const getImage = async (name) => {
const query = stringMan(name.name)
console.log(query)
const img = await fetch(`https://pixabay.com/api/?key=17160673-fd37d255ded620179ba954ce0&q=${query}&image_type=photo`)
const image = await img.json();
console.log(image)
setImage({ [name.name]: image.hits[0].largeImageURL })
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category" key={category.id}>
{category.name}
<img key={category.id} src={image[category.name]} />
</div>
))}
</div>
</div>
)
There are a couple of changes that you can make here.
One issue that I see is that you have a single image variable, that's being re-used for every single category. So when you map over a list of categories (for example let's say we have categories: [history, science, and math]). The current code will call getImage three times, with history, science, and math as parameters.
However, there is only one state variable that is being written to. Which means the last execution of setImage is the only one that will be preserved.
So, you might want to change image from being the URL of a category image, to an object that has the shape:
{
history: [url],
science: [url],
math: [url]
}
The other change to make is that you are calling the getImage() function directly in the rendered output <img src={getImage(category.name)} />. Instead, this should simply use the value that was assigned to the image state: <img src={image} />.
To actually fetch the image, you can use the useEffect hook (https://reactjs.org/docs/hooks-effect.html) to react to changes to the categories variable. That might look something like:
useEffect(() => {
categories.forEach((c) => getImage(c));
}, [categories]);
The useEffect hook will invoke the function it is given, whenever the dependencies change. This will allow you to trigger the getImage function in response to changes to the categories.
There're lot of improvement that could be done as stated by #noah-callaway above/below but coming straight to the point you need to simply fix the URI creation logic to use encodeURIComponent like below:
import React, { useEffect, useState } from 'react';
function Category() {
useEffect(() => {
fetchData();
getImage();
}, []);
const [categories, setCategories] = useState([]);
const [image, setImage] = useState('');
const fetchData = async () => {
const data = await fetch('https://opentdb.com/api_category.php')
const categories = await data.json();
console.log(categories.trivia_categories)
setCategories(categories.trivia_categories)
}
const getImage = async (name) => {
return encodeURI(`https://pixabay.com/api/?key=apikey&q=${encodeURIComponent(name)}&image_type=photo`)
}
return (
<div className="categories">
Yesss
<div className="category-grid">
{categories.map(category => (
<div className="category">
{category.name}
<img src={getImage(category.name)} />
</div>
))}
</div>
</div>
)
}
don't have the api key so can't test but it'll give you something like
https://pixabay.com/api/?key=apikey&q=Entertainment%3A%20Comics&image_type=photo
good luck, hope it works.