How to Pass Props to Another Component In a Javascript Map?

Question

I have this code

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import 'materialize-css/sass/materialize.scss';
import 'font-awesome/scss/font-awesome.scss';
import Storage from './Storage.js'
import {fetchStorage, loadAddStorageModal, selectStorage} from '../actions/StorageActions.js'


class SideNavContainer extends React.Component {
    componentWillMount() {        
        this.props.fetchStorage();
    }
    render() {
             console.log(this.props);
        return (
            <ul id="slide-out" className="side-nav fixed">      
                {
                    var hold = this.props;
                    this.props.storages.fetchedStorages.map(function (storage, i) {
                        return <Storage key={i} >{storage.name}</Storage>
                    })
                }
                <li>
                    <a className="waves-effect waves-light" onClick={() => this.props.loadAddStorageModal(true)}><i className="fa fa-plus" aria-hidden="true">Add</i></a>
                </li>
                <li className="hide-on-large-only"><a href="/Home/Index">Home</a></li>
                <li className="hide-on-large-only"><a href="/Account/SignOut">Signout</a></li>
            </ul>
        )
    }
}

function mapStateToProps(state) {
    return {
        storages: state.storages
    };
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchStorage: fetchStorage, loadAddStorageModal: loadAddStorageModal, selectStorage: selectStorage }, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(SideNavContainer);

I am trying to pass "this.props" into my Storage Component. I tried to do

 return <Storage {...this.props} key={i} >{storage.name}</Storage>

but I believe scope has changed so that does not work anymore. I tried to put it in a variable called "hold" but that just crashes the entire application as it says "var" is an Unexpected token.

Try moving the var hold = ... to before the return statement. — Matt Holland
– Matt Holland, Commented Aug 10, 2016 at 23:15

Jack · Accepted Answer · 2016-08-10 21:48:43Z

1

Use the fat arrow style function expression to auto-bind this:

this.props.storages.fetchedStorages.map((storage, i) => {
  return <Storage key={'storage-' + i} {...this.props}>{storage.name}</Storage>;
});

answered Aug 10, 2016 at 21:48

Jack

21.3k12 gold badges51 silver badges48 bronze badges

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

2 Comments

chobo2 Over a year ago

cool. I was just looking and I think passing all of the props is over kill. How could I just pass in selectStorage from action creator?

chobo2 Over a year ago

I can get it with the using "bind" {this.props.selectStorage.bind(this)} but I can't get it with using auto bind. Maybe I did not do it right

Collectives™ on Stack Overflow

How to Pass Props to Another Component In a Javascript Map?

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