не может получить данные от поставщика к потребителю

Question

Я передал строковые данные, которые я получил от моей конечной точки API, своему дочернему потребителю, и я хочу перебрать их через таблицу material-ui, но я не могу получить их в своих дочерних элементах, но я получаю их в своем родительском компоненте , Также странные они, что я могу отображать строковые данные в моей HTML-странице, как они есть!

App.js:

import axios from './axios-coins';
import CPContext from './context/context.js'


class App extends Component {

    state = {
      data: [],
      isLoading: true
    };

componentDidMount() {
      this.fetchData();
}

fetchData() {
  axios
    .get("")
    .then(response => {
      let res = response.data.data;


this.setState({data: res});
    })
    .catch(error => this.setState({ error, isLoading: false }));
}

render () {
    return (
      <CPContext.Provider 
        value={{
          data: this.state.data
        }}>
      </CPContext.Provider>
    );
  }
}

children.js:

return (
                <CPContext.Consumer>
                  {context => (
                    <Paper className={classes.root}>
                    <Table className={classes.table}>
                      <TableHead>
                        <TableRow>
                          <CustomTableCell>id</CustomTableCell>
                          <CustomTableCell align="right">name</CustomTableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                      {Object.entries(context.data).map(v => (
                        <TableRow className={classes.row} >
                          <CustomTableCell component="th" scope="row">
                          {v[1].id}
                          </CustomTableCell>
                          <CustomTableCell align="right">{v[1].name}</CustomTableCell>

                         </TableRow>
                      ))}
                         </TableBody>
                    </Table>
                  </Paper> 
                  )}
            </CoinContext.Consumer>
        )

PS: в моем app.js я могу регистрировать эти данные, так как я регистрирую их с помощью метода object.entries, который я использовал в children.js. Любая помощь будет по достоинству оценена !!

Answer 1

Используйте обертку для вашего текста. Например, вы должны использовать это:

<p>{v[1].id}</p>

или:

<p>{v[1].name}</p>