score:0
the problem is here only,
{this.props.datafromapp.map((item,venue) => <li key={venue}>{item}</li>)}
you are directly trying to render item
which is a object
and not a plain data.
your error also stating the same,
(found: object with keys {reasons, venue, referralid})
it means that item = {reasons="", venue="", referralid=""}
you must do something like this,
{this.props.datafromapp.map(item => <li key={item.referralid}>{item.venue}</li>)}
score:0
wrap state inside a constructor
constructor(){
super();
this.state = {
venues : []
};
}
in getvenues() function set the venues using
this.setstate({ venues: // the response from the third party api });
score:0
error says that you are rendering an object in dom, you can't do that you have to render single key of object or to render multiple keys you have to iterate over keys.
your mistakes
firstly, you are not storing data in local state. use
this.setstate({venues : [response array here]})
secondly, you should define key of venue object in
<li key={venue}>{item}</li>
like this<li key={venue}>{item.key}</li>
score:1
try this
<div classname='code'>
{this.props.datafromapp.map((item,venue) => <li key={venue}>{item.venue}</li>)}
</div>
Source: stackoverflow.com
Related Query
- How to access the passed prop array inside the child component
- How to access a prop in a layout component if my component is being passed to the layout component as a chilren prop in ReactJS?
- React: Unable to access the parent component's function which is passed as prop to child component
- How to access props from Parent Component inside the Child Class Component ? (specifically for componentDidMount)?
- Why the same prop is array in parent component and isn't array anymore if passed to child component
- How do I access refs of a child component in the parent component
- How to spyOn method inside prop passed down to a component using Jest?
- React.js how to pass in index as prop to child component from this.props array
- React Hooks - function inside function component passed as prop can't access state
- How is an argument for a callback in React being passed from the child component to the parent component?
- How to change the background color of a parent component from inside a child component in react, gatsby
- How to get the ref of a child component inside parent component in ReactJS
- How to unit test React functions passed in as prop to child component with Enzyme shallow wrapper
- Styled Component - How to prevent a prop from being passed to the extended component?
- How do I pass a prop to a react component yet not update that prop in the child when parent changes?
- How to access the DOM element of the child component in Preact with hooks?
- How to update redux state using a react variable passed up to the component from a child
- How can i only re-render the new child component when mapping an array from Redux state?
- How to write a generic that extracts the prop types of the component that passed in
- How to change the value of a prop of Sub Component passed as a column to React Table?
- How to access the state of a child component from a parent class
- How do I access some data of a property I passed from parent component to child component?
- How to toggle setInterval in a child via state that was passed from parent component as a prop
- Why the state is still showing Promise while using redux? and how should I access the array inside the result?
- How to add a prop to a child component already receiving props via the spread operator?
- The array data passed over is sent as a Promise how do I access it
- How to write test for the HTML element being passed as a prop to a component a and a function is being called from that
- React JS - How to access props in a child component which is passed from a parent component
- Unable to setState inside child component using the value passed by Parent
- React: How can you access the class name of a parent component from a child without passing it down as props?
More Query from same tag
- CORS error in Node+react app with facebook authentication using passport
- Link param doesn't render in JSX (react)
- ReactJS - how to pass component reference to another component as prop?
- How to select the desired input field for filtering in React Data Grid
- How to get a precise id from the array of objects?
- Validating ReactJS inputs while using BackboneJS models
- Tim Dashboard React doesn't work with Fixed position
- Javalin sessionAttribute() isn't Persisting Between Requests
- Meteor can't run gcloud on server side
- TypeScript and createContext - Property is missing on type
- How to make a React component setState() based on a Redux state change?
- How can I filter RadioButton choices based on another field in react-admin?
- Access Child Element's DOM Node in React
- How to set data in child component dynamically by using props in React?
- Material UI V5: createTheme Palette only works on primary and secondary
- Showing error in yarn start command says This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
- How to implement an array increment function within JSX code using React.js JavaScript
- React Router structuring - passing functions
- How to solve hidden text , on scrolling Footer that hides text of body in React
- Flow of arrow function in javascript?
- react-beautiful-dnd: Cannot find drag handle element inside of Draggable
- How to move React-JSS styles to separate file?
- Using JS how do i detect a color I'm hovering over?
- React | Ant design select value not setting
- How to use window.onbeforeunload in React for showing popup for reload if the user clicks on reload
- React Routing: URL is changing but page is not loading
- How to pass initial state to reducer
- queryCache.find() is undefined
- Render collection of nested JSON Data
- scroll to top on react react-router-dom page change