Acf Tinymce Cannot Read Property 'onpageload' of Undefined
React - Cannot read holding 'map' of undefined
March 12, 2020 - 5 min read
If y'all are a react developer, there is a good chance that y'all faced this mistake couple of times:
TypeError: Cannot read property 'map' of undefined
TL;DR - If you are not in the style for reading or y'all just want the lesser line, then hither it is
The trouble
In order to understand what are the possible solutions, lets first understand what is the exact issue here.
Consider this code block:
// Only a data fetching role const fetchURL = "https://jsonplaceholder.typicode.com/todos/" ; const getItems = ( ) => fetch (fetchURL) . then ( res => res. json ( ) ) ; office App ( ) { const [items, setItems] = useState ( ) ; useEffect ( ( ) => { getItems ( ) . and then ( data => setItems (information) ) ; } , [ ] ) ; return ( <div > {items. map ( item => ( <div key = {item.id} > {particular.title} </div > ) ) } </div > ) ; } We accept a component that manage a state of items, it also have an effect which inside it we run an asynchronous performance - getItems, which will return united states the information nosotros need from the server, then we call setItems with the received information equally items. This component likewise renders the items - information technology iterate over it with .map and returning a react element for each item.
Merely we wont see anything on the screen, well except the error:
TypeError: Cannot read holding 'map' of undefined
What's going on here?
We practise accept an items variable:
const [items, setItems] = useState ( ) ; And we did populate it with our information returned from the server:
useEffect ( ( ) => { getItems ( ) . then ( data => setItems (information) ) ; } , [ ] ) ; Well lets examine how the react flow looks like in our example:
- React renders (invoking) our component.
- React "meet" the
useStatecall and render us[undefined, fn]. - React evaluate our render statement, when it hits the
items.map(...)line its really runningundefined.map(...)which is obviously an error in JavaScript.
What about our useEffect call though?
React volition run all furnishings after the render is committed to the screen, which means we tin't avoid a first render without our data.
Possible solutions
#1 Initial value
One possible solution is to give your variable a default initial value, with useState it would wait similar that:
const [items, setItems] = useState ( [ ] ) ; This means that when react runs our useState([]) telephone call, it volition return us with
Which ways that in the get-go render of our component, react will "see" our items as an empty array, so instead of running undefined.map(...) like before, information technology will run [].map(...).
#ii Conditional rendering
Another possible solution is to conditionally return the items, meaning if nosotros have the items then render them, else don't render (or render something else).
When working with JSX we tin't just throw some if else statements inside our tree:
// ⚠️ wont piece of work!! export default role App ( ) { // .... return ( <div > { if (items) { items. map ( particular => ( <div cardinal = {item.id} > {item.championship} </div > ) ) } } </div > ) ; } But instead we tin can create a variable exterior our tree and populate it conditionally:
Note that we removed the initial array for items.
role App ( ) { const [items, setItems] = useState ( ) ; useEffect ( ( ) => { getItems ( ) . then ( data => setItems (data) ) ; } , [ ] ) ; let itemsToRender; if (items) { itemsToRender = items. map ( detail => { render <div key = {detail.id} > {detail.title} </div > ; } ) ; } return <div > {itemsToRender} </div > ; } The undefined or goose egg values are ignored inside the context of JSX and so its prophylactic to laissez passer it on for the first return.
We could likewise use an else statement if we want to render something else like a spinner or some text:
function App ( ) { const [items, setItems] = useState ( ) ; useEffect ( ( ) => { getItems ( ) . then ( data => setItems (information) ) ; } , [ ] ) ; let itemsToRender; if (items) { itemsToRender = items. map ( item => { render <div key = {item.id} > {item.title} </div > ; } ) ; } else { itemsToRender = "Loading..." ; } return <div > {itemsToRender} </div > ; } #2.5 Inline conditional rendering
Another pick to conditionally return something in react, is to apply the && logical operator:
office App ( ) { const [items, setItems] = useState ( ) ; useEffect ( ( ) => { getItems ( ) . so ( data => setItems (information) ) ; } , [ ] ) ; return ( <div > {items && items. map ( item => { return <div key = {detail.id} > {item.title} </div > ; } ) } </div > ) ; } Why information technology works? The react docs explains information technology well:
It works because in JavaScript, true && expression always evaluates to expression, and false && expression ever evaluates to false. Therefore, if the condition is true, the chemical element right afterwards && will appear in the output. If it is false, React volition ignore and skip it.
We can also use the conditional operator condition ? true : false if we want to render the Loading... text:
function App ( ) { const [items, setItems] = useState ( ) ; useEffect ( ( ) => { getItems ( ) . then ( data => setItems (data) ) ; } , [ ] ) ; return ( <div > {items ? items. map ( item => { render <div key = {detail.id} > {particular.title} </div > ; } ) : "Loading..." } </div > ) ; } We can also mix both solutions, i.due east: initial value with conditional rendering:
office App ( ) { const [items, setItems] = useState ( [ ] ) ; useEffect ( ( ) => { getItems ( ) . so ( data => setItems (data) ) ; } , [ ] ) ; return ( <div > {items && items.length > 0 ? items. map ( item => { render <div primal = {detail.id} > {particular.title} </div > ; } ) : "Loading..." } </div > ) ; } Though continue in mind, whenever atmospheric condition get too complex, information technology might be a signal for us to extract that logic to a component:
role List ( { items, fallback } ) { if ( !items || items.length === 0 ) { return fallback; } else { return items. map ( item => { return <div key = {item.id} > {particular.championship} </div > ; } ) ; } } function App ( ) { const [items, setItems] = useState ( [ ] ) ; useEffect ( ( ) => { getItems ( ) . then ( data => setItems (data) ) ; } , [ ] ) ; render ( <div > < List items = {items} fallback = { "Loading..." } /> </div > ) ; } Wrapping up
When we get such an error, we are probably getting the value in an asynchronous way. We should provide an initial value for our variable or conditionally return it or both. If our condition become too complex, it might exist a practiced time to extract the logic to a component.
Hope you lot plant this article helpful, if you accept a different approach or any suggestions i would dearest to hear nigh them, you can tweet or DM me @sag1v. 🤓
Source: https://www.debuggr.io/react-map-of-undefined/
0 Response to "Acf Tinymce Cannot Read Property 'onpageload' of Undefined"
Post a Comment