score:0
Accepted answer
Your current initial state is an empty array, and you are trying to access pollOptions
, which is a property that doesn't exist on an empty array.
If you don't need anything, but pollOptions
, leave the initial state as an empty array, use polls
and not polls.pollOptions
when mapping the data, and make sure to set pollOptions
as the state:
export const EditPolls2 = () => {
const { _id } = useParams();
const [polls, setPolls] = useState([]);
useEffect(() => {
axios.get(`/polls/${_id}`).then((p) => {
setPolls(p.data.pollOptions); // set the pollOptions array as the state
});
}, [_id]);
return (
<div>
<p>edit polls 2</p>
<div>
<ul>
{polls.map((p) => ( // use polls and not pollOptions
<li key={p.pollId}>{p.option}</li>
))}
</ul>
</div>
</div>
);
};
If you do need the entire object (data
) in the state, don't use initial state, and use optional chaining (?.
) when mapping the array. If the state is undefined
, the mapping would be skipped:
export const EditPolls2 = () => {
const { _id } = useParams();
const [polls, setPolls] = useState(); // no initial state
useEffect(() => {
axios.get(`/polls/${_id}`).then((p) => {
setPolls(p.data);
});
}, [_id]);
return (
<div>
<p>edit polls 2</p>
<div>
<ul>
{polls.pollOptions?.map((p) => ( // optional chaining
<li key={p.pollId}>{p.option}</li>
))}
</ul>
</div>
</div>
);
};
Source: stackoverflow.com
Related Query
- functional component is not re-rendering after state change in React
- React component not rendering after state change
- Component not re rendering after state changing in React functional component
- React component not rendering after state change from callback
- React Child Component Not Updating After Parent State Change
- react is not updating functional component state on input change
- react component state change after ajax call but does not rerender component
- React Js component rendering only once after state change
- Functional Component does not rerender after state changes [ React ]
- React functional component is not rendering when updating the Sate after pushing data to array
- React component not rerendering after state change despite using setState()
- State variable of react component does not change after fetch
- React functional component stops rendering on state changes after remounting
- React Child Component Not Rendering After Change
- React functional component not re-rendering with state change
- React functional component state change does not trigger child component to re-read its props
- React functional component is not re-rendering on state change
- React .map not re-rendering on state change in functional component
- React functional component not re-rendering on its own state change
- React Component Does not Always Rerender After State Change
- React component not re-rendering on state change
- React shouldComponentUpdate() is called even when props or state for that component did not change
- React Mobx - component not updating after store change
- React component not re-rendering after props change
- how and when to call a react component methods after state change from redux
- React, component not re-rendering after change in an array state
- Map of React Components not re rendering on State Change
- React State change is not Rendering
- React child component not re-rendering on parent state change
- Functional Component in React is not updating on props change
More Query from same tag
- how i can render directly my menu when my local storage is not null?
- NavLink activeClassName not working with Tailwind CSS
- How to stop set interval when a certain condition has been met in React?
- Next.js pages using Link module not loading files with CSS import
- Unable to add new key-value pair dynamically to a STATE JSON Array in React App
- Ternary operation not working on button click in reactJS?
- react router with flask back end
- react js oauth2 login using react and spring boot shows auth window
- How to get data for specified user from front end(React js) to back end(Node js, MySQL)
- useState() in react does not update the data - is this the sort() issue?
- ReactJS: Preview multiple images before upload
- setState getting updated multiple times
- Conditional Type without using As
- In React, is it possible to alter state inside of the map method, and if not what is an alternative?
- How can I reuse other external styled-components
- ReactJs this.props.router undefined
- React js function not found in package
- Axios Post returning no data after 200 response
- How to center items in a div without losing height of parent?
- I want to find the path of the folder
- Next.js and multiple module.exports options in next.config.js
- Accessing Upload Data in React From Multer Node Server
- ReactDom is not defined with react and webpack
- Conditionally add attributes as result of nested function to React components
- Get font color of ReactJS element
- React Routing - How to Organize Redirect With OnClick In Parent Component
- SVG is displayed with wrong colors
- How do I remove only one element from an array from Redux? Not working for me currently
- What is the difference between JavaScript and JSX?
- Play Spotify song preview in audio element