React Native, Error: Objects are not valid as a React child-CodePudding

I'm passing down props to a different component so I can make an api call. It makes the api call and i can console.log fine, but won't render the screen and I get this error:

"Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead."

Code:

const BlogScreen = route => {
  const blog_id = route.route.params.blog_id;

  return (
    <SafeAreaView style={styles.screen}>
      <Header />
      <BlogDetails blog_id={blog_id} />
    </SafeAreaView>
  );
};



export default BlogDetails = async props => {
  const blog_id = props.blog_id;
  console.log(blog_id);
    await axios
      .get(url)
      .then(res => {
          console.log(res.data);
       });
  return (
    <View style={{width: '100%', flex: 1}}>
      <Text></Text>
    </View>
  );
};

CodePudding user response：

The BlogDetails component does not seem right.

Here's a solution:


export default BlogDetails = props => {
  const blog_id = props.blog_id;
  console.log(blog_id);

  useEffect(() => {
    axios
      .get(url)
      .then(res => {
          console.log(res.data);
       });  
  },[])
  
  return (
    <View style={{width: '100%', flex: 1}}>
      <Text></Text>
    </View>
  );
};