ReactJS-在Prop中使用嵌套数组的Rending Map函数

Question

I'm trying to figure out how to map a nested array in my prop and also determine if there is a better, best practice, way to split out this logic into a separate component. I thought I had followed the correct approach below, but receive an error at my opening { for the start of the nested map method.

Error message:

ERROR in ./public/components/app/comment-box/comment.jsx
Module build failed: SyntaxError: Unexpected token, expected , (46:12)

  44 |         <div>
  45 |         { props.records.map((record, index) => <RecordCard {...record} />
> 46 |             {
     |             ^
  47 |                 { record.record_comments.map((comment, i) => 

Code:

  //GET /api/test and set to state
    class RecordsFeedContainer extends React.Component{
        constructor(props, context) {
            super(props, context);
            this.state = this.context.data || window.__INITIAL_STATE__ || {records: []};
        }

        fetchList() {
            fetch('http://localhost:3000/api/test')
                .then(res => {
                    return res.json();
                })  
                .then(data => {
                    this.setState({ records: data });
                })
                .bind(this)  
                .catch(err => {
                    console.log(err);
                });
        }

        componentDidMount() {
            this.fetchList();
        }

        render() {
            return (
                <div>
                <h2>Records List</h2>
                <ul>
                <RecordsFeed {...this.state} />
                </ul>
                </div>
            )
        }
    };

    //Loop through JSON and component
    const RecordsFeed = props => {
            return (
            <div>
            { props.records.map((record, index) => <RecordCard {...record} />
                {
                    { record.record_comments.map((comment, i) => <Comments {...comment} />)}
                }
            )}
            </div>
            )
    }

Answer 1

JSX props.records.map((record, index) => <RecordCard {...record} />

is turned into

props.records.map((record, index) => {
    return React.createElement(RecordCard, ...record);
}

Your code would be

props.records.map((record, index) => {
    return React.createElement(RecordCard, ...record) { { record.record_comments.map...;
}

I'm guessing comments should be inside the cards, right? So then you could do this instead:

{ props.records.map((record, index) => {
    return (
        <RecordCard {...record}>
            { record.record_comments.map((comment, i) => <Comments {...comment} /> )}
        </RecordCard>
    );
} )}

Then inside RecordCard you would add {this.props.children} somewhere in it's render method's returned JSX.