How to pass extra props down to children of arry.map

help
1

I have been trying to pass extra props own to the children being created with the .map function but I have not been able to succeed in passing them succesfully.

This is my code:



    export const CommentsListShanghai = (props) => {
      const newTimestamp = props.timestamp;
      console.log(newTimestamp);
      const comments = props.comments;
      if (comments.length > 0 ) {
       return (
        <ButtonToolbar className="comment-list">
        {comments.map((com) => {
          return ( 
            com.adminSpark ? 
              <CommentsModal 
                className="comments-modal"
                data-comments-modal={props.newTimestamp}
                key={ com._id } 
                comment={ com } 
                city={com.city} 
                person={com.person} 
                location={com.location} 
                title={com.title} 
                content={com.content} 
                fileLink={com.fileLink} 
                timestamp={com.timestamp} 
                createdBy={com.createdBy}
                /> :
              <CommentsModal 
                key={ com._id } 
                comment={ com } 
                city={com.city} 
                person={com.person} 
                location={com.location} 
                title={com.title} 
                content={com.content} 
                fileLink={com.fileLink} 
                timestamp={com.timestamp} 
                createdBy={com.createdBy} />
            )
        })}
        </ButtonToolbar> 
       );
      } else {
        return (
          <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
        );
      }
    };

    CommentsListShanghai.propTypes = {
      comments: React.PropTypes.array,
    };

I am able to pass all the props of the comments const that I created, the problem is that besides these props I also need to pass an extra prop which is available in the CommentsListShanghai. How am I able to pass an extra props to this array?

I am able to console.log(newTimestamp) without a problem but don’t understand how I can pass it down to the .map function.

2

First off, you could do a bit of code cleanup to avoid repetition:

comments.map((com) => {
  const commonProps = {
    ..._pick(com, [
      'city',
      'person',
      'location',
      'title',
      'content',
      'fileLink',
      'timestamp',
      'createdBy',
    ]),
    comment: com,
    key: com._id,
  };

  return ( 
    com.adminSpark ? 
      <CommentsModal 
        className="comments-modal"
        data-comments-modal={props.newTimestamp}
        { ...commonProps }
      /> :
      <CommentsModal 
        { ...commonProps }
      />
    )
})

Be sure to add import _pick from 'lodash/pick' at the top of your file and make sure lodash is installed. I don’t import _ because I’ve had issues in the past with collisions with underscore.

As for your timestamp, I’m not really sure what’s going on with that. You define a new variable newTimestamp, but then pass props.newTimestamp. I think you wanna zap the props. part of that to just pass the timestamp in.

3

Thank you for taking the time to write this asnwer. And yes my code indeed could use some cleanup. It’s my first big project and I still have to learn how to write my code better.

What I was wondering, how can I then access the data-comments-modal props in my CommantsModal?

I have tried this.props.data-comments.modal but that gives me an error that comments is not defined.

4

I’m not totally confident in this answer, but I wonder if maybe JSX doesn’t like the hyphens in the prop name? Try dataCommentsModal instead, and then access via this.props.dataCommentsModal. And you should see the value you passed in (newTimestamp).

5

haha, I thought for some odd reason that “data-” had to be used here, I don’t ever know why. But now I understand the whole thing a bit better again. Thanks for helping me out. I am able to read the value I need in my Modal now!
And thanks for the tips on cleaning up my code, it’s really something I want to learn to do better.

Would actually be a nice idea if there would be a platform where you can post your code so other people can check it and give advice on how to write the same code but better/cleaner.

6

Yeah, typically you only need data-blah-whatever if you’re using a plugin that needs those attributes. Since I’ve stopped using jQuery and jQuery plugins, I haven’t actually seen that since. :slight_smile:

My first reaction was to suggest StackOverflow, but I have a feeling if you posted just asking for code cleanup, your post would get downvoted pretty quickly! Maybe this forum is your best bet for now.