ReactJS - Passing Array to Imported Component

Question

I'm trying to modularize my components into external files and import them into an index file, but I'm running into an error related to passing an array to an imported component. It doesn't appear to be handling this array in my modularized component and I'm wondering if it is an issue with my importation in my index file or with my component logic in the external file. Can anyone point me in the right direction?

index.js:

import React from 'react';
import fetch from 'node-fetch';
import ReactMarkdown from 'react-markdown';
import path from 'path';
import Comments from './comment/record-comment';

//Loop through JSON and create Record and Comment Container Component
const RecordFeed = props => {
    return (
        <div>
        { 
            props.records.map((record, index) => {
                return (
                    <RecordCard {...record} key={record.recordIdHash} user={props.user}>
                        { record.record_comments.map((comment, i) => 
                            <Comments {...comment} key={comment.recordCommentId} /> 
                        )}
                    </RecordCard>
                );
            })
        }
        </div>
    )
}

record-comment.js:

import React from 'react';

//Record Comment - Comment
const Comment = props => {
    return (
        <div>
            <h5>{props.user_id}</h5>
            <h4>{props.comment}</h4>
            <h3>{props.app_user.fullNameSlug}</h3>
        </div>
    )
}

//Record Comment - Container
export default class Comments extends React.Component {
    render() {
        return (
            <Comment />
        );
    }
}

Please import RecordCard. Why you are using Comment and Comments . Both are same — PranavPinarayi
– PranavPinarayi, Commented Oct 23, 2017 at 11:54

Lingaraju E V · Accepted Answer · 2017-10-23 11:50:12Z

1

Why do you have to export Comments component which does nothing, export just the Comment component as export default Comment. If in any case (which i can't think of) you do require to export Comments class, make sure you pass props to the child like -

export default class Comments extends React.Component { render() { return ( <Comment {...this.props} /> ); } }

Also, you don't seem to be importing your RecordCard component

answered Oct 23, 2017 at 11:50

Lingaraju E V

5032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cphill Over a year ago

Thanks for the answer. This was a template to see if the import was working. I plan on building on this foundation with more modularized elements, which is why I have the two components. Also, RecordCard is set elsewhere in the index.js file. I didn't think it was relevant to the question which is why I left it out of the code. Will I need to define props somewhere in the code you mentioned above?

Lingaraju E V Over a year ago

No. The {...comments} and key props you have provided in index.js will be provided to the stateful Comments component as this.props.

Collectives™ on Stack Overflow

ReactJS - Passing Array to Imported Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related