Eliminating attributes in mapStateToProps

Question

Eliminating attributes in mapStateToProps

When wrapping material TextField with a redux component, it is important to consider that some properties should be used in mapStateToProps only and not passed directly to the component. Otherwise, an Unknown prop warning may occur. Even specifying an undefined value does not resolve this issue.

function mapStateToProps(state = {}, ownProps) {
    var dataKey = ownProps.dataKey;
    return {
        value: state[dataKey],
        dataKey: undefined
    }
}
const store = createStore(reducer, {stuff: 123});

const toDraw = <TextInput dataKey="stuff"/>

Link to JSFiddle example

Is there a simpler way to remove something from ownProps in mapStateToProps without creating a wrapper component?

javascript redux react-redux material-ui

Answer 1

Answer №1

To achieve this, you can define a custom function for connect's third parameter mergeProps, which typically looks like this:

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, stateProps, dispatchProps);
}

Create your personalized version that selects only the specific props you need to pass to your component.

Answer 2

To achieve this, you can define a custom function for connect's third parameter mergeProps, which typically looks like this:

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, stateProps, dispatchProps);
}

Create your personalized version that selects only the specific props you need to pass to your component.

Eliminating attributes in mapStateToProps

Answer №1

Similar questions

Merging pertinent information from separate arrays

Is there a way to detect changes in a Service variable within an Angular component?

What steps are involved in importing remark-gfm into next.config.js?

How to use expressjs to fetch an image from a URL and show it on a webpage

The function document.getElementById(...) is failing to retrieve the text data from the table as expected

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

discovering obscured information using jquery

By checking the active box and completing the fields, the button will be activated

What is the proper way to reference an EJS function that is declared in a different EJS file?

Trouble with displaying my three.js 3D model

Interacting between frames with jQuery

Viewing Server Logs in a Discord Channel

Receiving a response from an XMLHttpRequest() within a function

Guide on incorporating a customized HTML tag into ckeditor5

What design pattern serves as the foundation for Angularjs? Is mastering just one design pattern sufficient?

A TypeScript class transferring data to a different class

Inserting additional information and assigning a category following a prosperous AJAX request accompanied by output from php echo

Passing arguments to the callback function in React: a comprehensive guide

The attempt to install "expo-cli" with the command "npm install -g expo-cli" was unsuccessful

Using Angular 7 shared service to allow sibling components to exchange data between each other