CODEWITHSUNDEEP
javascriptreactjsredux
Jithin Zacharia
Jithin Zacharia

Reputation: 371

Unable to access props passed to a child component

I am using React and Redux, But when I am passing data from container to the child components. The props is becoming an empty object. This is my Container component.

class HeaderContainer extends React.Component {
    render() {
        return <Header searchByName = {this.props.searchByName} />
    }

}

const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        searchByName: searchProviderByName.searchProviderByName
    }, dispatch)
}

export default connect(null, mapDispatchToProps)(HeaderContainer);

But when I am trying to access the data in the child component. It is coming as empty object.

export default function Header(props) {
 const performSearch = () => {
        props.searchByName(name,location); // getting undefined, props is empty object
 }
}

Upvotes: 1

Views: 68

Answers (1)

HMR
HMR

Reputation: 39320

I have taken the code from your question and can show that it works just fine (see snippet below). Either you messed up an import or searchProviderByName.searchProviderByName is undefined but then Header would still not receive an empty props.

It is not possible to indicate what's wrong with your code because code provided in question works, maybe you can provide a snippet or sandbox that demonstrates the problem you have.

const { Provider, connect } = ReactRedux;
const {
  createStore,
  applyMiddleware,
  compose,
  bindActionCreators,
} = Redux;

const initialState = {};
//action types
const SOME_ACTION = 'SOME_ACTION';
//action creators
const someAction = (...args) => ({
  type: SOME_ACTION,
  payload: args,
});
const reducer = (x) => x;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) => {
      console.log('action:', action);
      return next(action);
    })
  )
);

function Header(props) {
  return (
    <button onClick={() => props.searchByName()}>
      click me
    </button>
  );
}
class HeaderContainer extends React.Component {
  render() {
    return (
      <Header searchByName={this.props.searchByName} />
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(
    {
      searchByName: someAction,
    },
    dispatch
  );
};

const App = connect(
  null,
  mapDispatchToProps
)(HeaderContainer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>


<div id="root"></div>

Upvotes: 1

Related Questions