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

Question

In my application, I'm trying to fetch a data from my api. I've already tried to fetch data in my other modules and they're all working fine, but here it's not.

In here I'am trying to fetch a single object/data in my api.

Here's my code

Category.js

export default class Category extends Component {
    constructor(props){
    super(props)
        this.state = {
            data: [],
            orderDet: '',
        };
    }
    fetchDataOrderNo = async () => {
        const response = await fetch("http://192.168.254.105:3308/OrderNo/order_no")
        const json = await response.json()
        this.setState({ orderDet: json })
    }

    componentDidMount() {
        this.fetchDataOrderNo();
    }

    render() {
        return (
            <View>
                <View style={{flexDirection: 'row'}}>
                    <Text>Table No: { this.state.orderDet }</Text>
                </View>
            </View>
        )
    }
}

Answer 1

You are getting an array as response to your request. You have to access the first object in the array, and get the order_no key:

fetchDataOrderNo = async () => {
    const response = await fetch("http://192.168.254.105:3308/OrderNo/order_no")
    const json = await response.json()
    this.setState({ orderDet: json[0].order_no })
}