React Native: Invariant Violation: Objects are not valid as a React child - reactjs

Question

So my understanding according to this post:
React Redux: Uncaught Invariant Violation (Objects are not valid as a React child)
is that my {job.title} and so on are objects and React won't let me just plop an object into the render output, but I guess I don't have enough experience to understand fully as to why I am getting this error in the first place nor how to fix it.
So in this screen:
import React, { Component } from "react";
import { View, Text, Platform } from "react-native";
import { MapView } from "expo";
import { connect } from "react-redux";
import { Card, Button } from "react-native-elements";
import Swipe from "../components/Swipe";
import * as actions from "../actions";
class DeckScreen extends Component {
renderCard(job) {
return (
<Card title={job.title}>
<View style={{ height: 300 }}>
<MapView
scrollEnabled={false}
style={{ flex: 1 }}
cacheEnabled={Platform.OS === "android" ? true : false}
/>
</View>
<View style={styles.detailWrapper}>
<Text>{job.company}</Text>
<Text>{job.post_date.toString()}</Text>
</View>
<Text>
{job.description.replace(/<span>/g, "").replace(/<\/span>/g, "")}
</Text>
</Card>
);
}
renderNoMoreCards() {
return <Card title="No more jobs" />;
}
render() {
return (
<View>
<Swipe
data={this.props.jobs}
renderCard={this.renderCard}
renderNoMoreCards={this.renderNoMoreCards}
keyProp="id"
/>
</View>
);
}
}
const styles = {
detailWrapper: {
flexDirection: "row",
justifyContent: "space-around",
marginBottom: 10
}
};
function mapStateToProps({ jobs }) {
return { jobs: jobs.listing };
}
export default connect(
mapStateToProps,
actions
)(DeckScreen);
and in my component:
import React, { Component } from "react";
import {
View,
Animated,
PanResponder,
Dimensions,
LayoutAnimation,
UIManager
} from "react-native";
const SCREEN_WIDTH = Dimensions.get("window").width;
const SWIPE_THRESHOLD = 0.25 * SCREEN_WIDTH;
const SWIPE_OUT_DURATION = 250;
class Swipe extends Component {
static defaultProps = {
onSwipeRight: () => {},
onSwipeLeft: () => {},
keyProp: "id"
};
constructor(props) {
super(props);
const position = new Animated.ValueXY();
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (event, gestureState) => true,
onPanResponderMove: (event, gestureState) => {
position.setValue({ x: gestureState.dx, y: gestureState.dy });
},
onPanResponderRelease: (event, gestureState) => {
if (gestureState.dx > SWIPE_THRESHOLD) {
this.forceSwipe("right");
} else if (gestureState.dx < -SWIPE_THRESHOLD) {
this.forceSwipe("left");
} else {
this.resetPosition();
}
}
});
this.state = { panResponder, position, index: 0 };
}
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.setState({ index: 0 });
}
}
componentWillUpdate() {
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
LayoutAnimation.spring();
}
forceSwipe(direction) {
const x = direction === "right" ? SCREEN_WIDTH : -SCREEN_WIDTH;
Animated.timing(this.state.position, {
toValue: { x, y: 0 },
duration: SWIPE_OUT_DURATION
}).start(() => this.onSwipeComplete(direction));
}
onSwipeComplete(direction) {
const { onSwipeLeft, onSwipeRight, data } = this.props;
const item = data[this.state.index];
direction === "right" ? onSwipeRight(item) : onSwipeLeft(item);
this.state.position.setValue({ x: 0, y: 0 });
this.setState({ index: this.state.index + 1 });
}
resetPosition() {
Animated.spring(this.state.position, {
toValue: { x: 0, y: 0 }
}).start();
}
getCardStyle() {
const { position } = this.state;
const rotate = position.x.interpolate({
inputRange: [-SCREEN_WIDTH * 1.5, 0, SCREEN_WIDTH * 1.5],
outputRange: ["-120deg", "0deg", "120deg"]
});
return {
...position.getLayout(),
transform: [{ rotate }]
};
}
renderCards() {
if (this.state.index >= this.props.data.length) {
return this.props.renderNoMoreCards();
}
return this.props.data
.map((item, i) => {
if (i < this.state.index) {
return null;
}
if (i === this.state.index) {
return (
<Animated.View
key={item[this.props.keyProp]}
style={[this.getCardStyle(), styles.cardStyle]}
{...this.state.panResponder.panHandlers}
>
{this.props.renderCard(item)}
</Animated.View>
);
}
return (
<Animated.View
key={item[this.props.keyProp]}
style={[styles.cardStyle, { top: 10 * (i - this.state.index) }]}
>
{this.props.renderCard(item)}
</Animated.View>
);
})
.reverse();
}
render() {
return <View>{this.renderCards()}</View>;
}
}
const styles = {
cardStyle: {
position: "absolute",
width: SCREEN_WIDTH
}
};
export default Swipe;
when I do a console.log(job); it renders everything you would see in the API endpoint:
And when I do a console.log(job.title); I get this:
[03:46:03] Front End Designer Summer Internship
[03:46:03] Senior UX / Product Designer - Investments AI team
[03:46:03] Technical AV Analyst
[03:46:03] Senior Designer
[03:46:03] Junior Developer
[03:46:03] Webinar Producer + Host
[03:46:03] Front End Web Developer
[03:46:03] Android Developer needed for React Native project
[03:46:03] UX Designer
[03:46:03] Software Product Engineer - Reinventing VC

Answer 1

Along the lines of doing a console.log(job);, I decided to then do a console.log(job.title); and I got back:
[03:46:03] Front End Designer Summer Internship
[03:46:03] Senior UX / Product Designer - Investments AI team
[03:46:03] Technical AV Analyst
[03:46:03] Senior Designer
[03:46:03] Junior Developer
[03:46:03] Webinar Producer + Host
[03:46:03] Front End Web Developer
[03:46:03] Android Developer needed for React Native project
[03:46:03] UX Designer
[03:46:03] Software Product Engineer - Reinventing VC
so that was not the problem, then I decided to move further and do a console.log(job.company); and I got back:
[03:48:25] Object {
[03:48:25] "id": "planningcenter",
[03:48:25] "location": Object {
[03:48:25] "id": "carlsbadca",
[03:48:25] "name": "Carlsbad, CA",
[03:48:25] },
[03:48:25] "logo": "https://d2fcz5no062gar.cloudfront.nethttps://authenticjobs.s3.amazonaws.com/uploads/logos/edc867ddb3b30a5c8f8819d1a1347346/thumb/PC -Icon -- color .png",
[03:48:25] "name": "Planning Center",
[03:48:25] "tagline": "Software designed to help church volunteers",
[03:48:25] "type": null,
[03:48:25] "url": "http://planning.center",
[03:48:25] }
[03:48:26] Object {
[03:48:26] "id": "americaninternationalgroupaig",
[03:48:26] "location": Object {
[03:48:26] "id": "175waterstreetnewyorkny10038",
[03:48:26] "name": "175 Water Street New York, NY 10038",
[03:48:26] },
[03:48:26] "logo": "https://d2fcz5no062gar.cloudfront.net/assets/images/defaults/company-blank.png",
[03:48:26] "name": "American International Group (AIG)",
[03:48:26] "tagline": "We're a 100 year old insurance company with operations globally!",
[03:48:26] "type": null,
[03:48:26] "url": "https://www.aig.com/about-us",
[03:48:26] }
[03:48:26] Object {
[03:48:26] "id": "universityofcalifornialosangeles",
[03:48:26] "location": Object {
[03:48:26] "id": "losangelesca",
[03:48:26] "name": "Los Angeles, CA",
bingo! there is the problem, returning objects on {job.company}, so then I decided to try console.log(job.company.id); and got:
[03:49:14] planningcenter
[03:49:15] americaninternationalgroupaig
[03:49:15] universityofcalifornialosangeles
[03:49:15] whitneymuseumofamericanart
[03:49:15] studioality
[03:49:15] convertkit
[03:49:15] metropolitanareaplanningcouncil
[03:49:15] jenzy
[03:49:15] cfainstitute
[03:49:15] nfx
boom! problem solved and my UI is rendering now.