React/mapで配列取得

import { render } from '@testing-library/react';
import defaultDataset from "./dataset"
import "./assets/styles/style.css"
import {AnswersList} from "./components/index";
import { sizeHeight } from '@material-ui/system';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      answers: [],
      chats: [],
      currentId: "init",
      dataset: defaultDataset,
      open: false
    }
  }

  initAnswer = () => {
    const initDataset = this.state.dataset[this.state.currentId];
    const initAnswers = initDataset.answers;
    this.setState({
      answers: initAnswers
    })
  }

  componentDidMount(){
    this.initAnswer()
  }

  render(){
    return (
      section className="c-section">
        div className="c-box">
          AnswersList answers={this.state.answers} />
        /div>
      /section>
    );
  }
}
    

import React from "react"
import {Answer} from "./index"

const AnswersList = (props) => {
    return(
        div className="c-grid__answer">
            {props.answers.map((value, index) => {
                return Answer content={value.content} key={index.toString()}/>
            })}
        /div>
    )
}

export default AnswersList
	

import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
    root: {
      '& > *': {
        margin: theme.spacing(1),
      },
    },
  }));

const Answer = (props) => {
    const classes = useStyles();
    return(
        Button variant="contained" color="primary">
            {props.content}
        /Button>
    )
}

export default Answer