score:1
Accepted answer
i would put the rendering stuff into another function, and to make what is going to be clearer i would use two returns:
import react, { usestate, useeffect } from "react";
import axios from "axios";
const userlist = ({ id, setid }) => {
const [resources, setresources] = usestate([]);
const fetchresource = async () => {
const response = await axios.get("https://api.randomuser.me/?results=10");
console.log(response.data.results);
setresources(response.data.results);
};
useeffect(() => {
fetchresource();
}, []);
const renderitem = (item, isloggedin) => {
return (
<li classname="card" key={item.name.first}>
<div classname="card__item">
<img classname="card__image" src={item.picture.large} alt={item.name.first} />
<h2 classname="card__title">
{item.name.first} {item.name.last}
</h2>
{isloggedin ? (
<button classname="card__cta" onclick={() => setid(null)}>
back to overview
</button>
) : (
<button classname="card__cta" onclick={() => setid(item.login.uuid)}>
details
</button>
)}
</div>
</li>
);
};
const user = resources.find(user => user.login.uuid === id);
if (user) {
return <ul classname="card__wrapper">{renderitem(user, true)}</ul>;
} else {
return <ul classname="card__wrapper">{resources.map(user => renderitem(user, false))}</ul>;
}
};
export default userlist;
score:0
looks like the question asked pertains to this react hooks - onclick show only the clicked item
please find my comment for the above post, as i guess this particular issue can be solved as mentioned in the comment! in case it doesn't fix, let me know.
Source: stackoverflow.com
Related Query
- React - Simplifying the code inside the return
- unexpected token, expected "," inside of react render() function in the return statement
- React : how to pass and array from inside a Function to the return (JSX)
- return value is not rendering when returned from inside the handleclick() function in react
- I want to select the text inside input box by clicking on a button in react js but my code doesn't work
- React JS is not building the div inside my return statement in map rendering
- Identifying the input checked from multiple checkboxes in react code and storing them inside an empty array
- how to use if-else inside the map return react js
- When is the code before the return of a functional React component executed?
- I want to write unit test for my react component.The logic what i want to test is inside UseEffect.Please find the code below
- dynamically render the array at different labels inside return function react js
- Rendering React components with promises inside the render method
- React Hooks Error: Hooks can only be called inside the body of a function component
- What is the TypeScript return type of a React stateless component?
- React Warning: Cannot update a component from inside the function body of a different component
- Why can I omit the return statement with parenthesis in React
- state inside useEffect refers the initial state always with React Hooks
- How to add comment inside the return statement in render function?
- View the source code of a website built with React
- What is the Flow return type of a React stateless functional component?
- React anti pattern, defined a component inside the definition of another component
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- There is an internal error in the React performance measurement code
- Invariant Violation in React Render OR the proper way to iterate and return in React
- the pros and const of react ssr with code splitting and now React.Lazy
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- What's the alternative to use hooks inside non React component?
- What is the React official position for throwing promises inside render functions?
- How to add a button inside a cell in the DevExtreme React Grid?
- useContext() react hook doesn't return the correct value
More Query from same tag
- Multiple recursive <tbody> in same <table>?
- React doesn't start if page reloaded on route with parameter
- How to set color to text in React JS
- How to access electron.app.getPath()?
- Redux- 'props' undefined using compose
- Change image on click - React
- React handleClick on component
- i am passing parameter from one function to another function in reactJs but result is coming null
- granchild rendering when its prop not change
- React -- changing state unrelated to component triggers maximum update depth error
- Redux mapDispatchToProps method is not working properly
- Material ui date time picker theme
- React Hot Loader v3. this component is not accepted by Hot Loader
- Displaying an image when item is hovered
- React useState being ignored
- convert the circle border onto clickable function
- TypeScript types to infer via keyof within React Context Provider
- Todolist react hooks
- Pass JSON object from child component to parent component
- how to show every part of array in different form in react component
- How to create React.js app without a function in App.js
- jest: Test suite failed to run, SyntaxError: Unexpected token import
- is it possible to use useMemo hook inside contitional statement?
- Webpacker::Manifest::MissingEntryError
- ReactJS Testing: Cannot read property 'have' of undefined
- Can't form an object dynamically
- Scrollable part of page
- Webpack config not accepting to config mode option
- Why doesn't react-router-redux work when using a custom basename?
- ESLint Rule on React Component: Method Render expected no return value