Fetching Data and display on the Bootstrap Table

[Mickaz89]

Hey guys i am fetching data from my Django Rest Api and i want to display them Bootstrap Table like But that display me just 1 item of my data How can i displays all the items ?

            class Products extends Component {

class Products extends Component {
 constructor(props) {
 super(props);
  this.state = {
   todos: []
  };
}

async componentDidMount() {
  try {
   const res = await fetch('http://127.0.0.1:8000/api/');
   const todos = await res.json();
   this.setState({
     todos
   });
   } catch (e) {
   console.log(e);
  }
}

render() {

if(this.state.todos.length == 0) { return null; }

return (

  <div>
    <BootstrapTable data={this.state.todos} striped hover>

        <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>

    </BootstrapTable>,
  </div>

[MaheshK02]

it's not working for me. unable to iterate data. even data is not display into the table