Invariant Violation: Objects are not valid as a React child (React Native)

Question

I'm trying to achieve a simple functionality, onPress of a button it should add placeName to place array and show it in the view but I seem to get an error, Please help

this my code,

export default class App extends Component{ state = { placeName: "", places: [] } onChangeName = (val) => { this.setState({ placeName: val }) } placeSubmitHandler = () => { if(this.state.placeName === "") { alert('enter something'); } else { this.setState(prevState => { return { places: prevState.places.concat(prevState.placeName) } }) } } render() { const placesOutput = this.state.places.map((place, i) => ( <Text key={i}>{place}</Text> )); return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={{width: 300}} value={this.state.textInput} placeholder='enter anything' onChange={this.onChangeName} style={styles.placeInput} /> <Button title='Add' style={styles.placeButton} onPress={this.placeSubmitHandler}/> </View> <View> {placesOutput} </View> </View> ); } }

this is error im getting,

Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead. in RCTText (at Text.js:154) in TouchableText (at Text.js:278) in Text (at App.js:48) in RCTView (at View.js:45) in View (at App.js:62) in RCTView (at View.js:45) in View (at App.js:51) in App (at renderApplication.js:35) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34)

I'm new to react native, so I have no idea about this.

Check stackoverflow.com/questions/33117449/… It might help you — Maheer Ali
– Maheer Ali, Commented Mar 28, 2019 at 8:03

Milore · Accepted Answer · 2019-03-28 08:17:11Z

In your <TextInput>you are using an onChange prop instead of onChangeText, so that you're tryng to render an object in a <Text>. Simply change that prop and it should work

 <TextInput style={styles.placeInput} value={this.state.textInput} placeholder="enter anything" onChangeText={this.onChangeName} />

Also note that you're duplicating its style property. Unify them or pass them as an array

style={[styles.placeInput, {width: 300}]}

Atin Singh · Accepted Answer · 2019-03-28 08:07:15Z

Your placesOutput variable is returning an object as jsx.

Instead of

const placesOutput = this.state.places.map((place, i) => ( <Text key={i}>{place}</Text> ));

Try

const placesOutput = this.state.places.map((place, i) => ( <Text key={i}>{place.name} /* place is an object use any property of it. */</Text> ));

I used some random property to use as an example. You should use any property that place object might have. Try and see if it works.
yeah, it was an object, so silly of me ...its working fine now, thanks

Collectives™ on Stack Overflow

Invariant Violation: Objects are not valid as a React child (React Native)

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related