Rendering data in React Native - reactjs

Question

I have an object named data that contains information about book. The simplest thing I want to do is render the book name. I am trying like below. Not working.
const data = {
"book": {
"id": "2d320",
"name": "book 1",
"Chapters": [
{
"No": "1",
"date": "2010-04-22",
"plots": [
{
"name": "Hero"
}
]
},
{
"No": "2",
"date": "2010-04-22",
"plots": [
{
"name": "Heroine"
}
]
},
]}}
export class Books {
render() {
return (
<View>
<div>{data.book.name}</div>
</View>
);
}
}

Answer 1

div should not be used in react-native, just replace it with Text after importing it. Secondly, class-based components should extend React.Component like so
import React, { Component } from 'react';
import { Text, View } from 'react-native';
const data = {
book: {
id: '2d320',
name: 'book 1',
Chapters: [
{
No: '1',
date: '2010-04-22',
plots: [
{
name: 'Hero',
},
],
},
{
No: '2',
date: '2010-04-22',
plots: [
{
name: 'Heroine',
},
],
},
],
},
};
class Book extends Component {
render() {
return <View>
<Text>{data.book.name}</Text>
</View>;
}
}
export default Book;
Here is a snack displaying the output you want.
If you don't want to import Component from 'react' and like to export directly then may also use this syntax
export default class Book extends React.Component {
render() {
return (
<View>
<Text>{data.book.name}</Text>
</View>
);
}
}