score:0

Accepted answer

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

  1. firstly, you are not storing data in local state. use this.setstate({venues : [response array here]})

  2. 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>

Related Query

More Query from same tag