Category: React

Sometimes, we want to identify different inputs with one onChange handler with React.

In this article, we’ll look at how to identify different inputs with one onChange handler with React.

How to identify different inputs with one onChange handler with React?

To identify different inputs with one onChange handler with React, we can create a function that gets the name attribute value of the field and put it in the state object as a property with the value of the same input as the value.

For instance, we write

import React, { useState } from "react";

export default function Exapmle() {
  const [userState, setUserState] = useState({
    firstName: "",
    lastName: "",
  });

  const handleChange = (e) => {
    const value = e.target.value;
    setUserState({
      ...userState,
      [e.target.name]: value,
    });
  };

  return (
    <form>
      <label>
        First name
        <input
          type="text"
          name="firstName"
          value={userState.firstName}
          onChange={handleChange}
        />
      </label>

      <label>
        Last name
        <input
          type="text"
          name="lastName"
          value={userState.lastName}
          onChange={handleChange}
        />
      </label>
    </form>
  );
}

to add 2 inputs with different name attribute values.

Then we define the handleChange function that gets the input value with e.target.value.

And we call setusetState with an object that has the existing userState properties.

And we add the [e.target.name] property with its value set to value.

e.target.name returns the name attribute value of the input.

Conclusion

To identify different inputs with one onChange handler with React, we can create a function that gets the name attribute value of the field and put it in the state object as a property with the value of the same input as the value.

Sometimes, we want to pass event with parameter with React onClick.

In this article, we’ll look at how to pass event with parameter with React onClick.

How to pass event with parameter with React onClick?

To pass event with parameter with React onClick, we set the onClick prop to a function that returns another function.

For instance, we write

const clickMe = (parameter) => (event) => {
  // ...
};

//...

<button onClick={clickMe(someParameter)} />;

to create the clickMe function that takes the parameter parameter and returns a function that takes the event parameter.

Then we set the onClick prop of the button to the function returned by clickMe called with someParameter, which is the function that has event as the parameter.

Conclusion

To pass event with parameter with React onClick, we set the onClick prop to a function that returns another function.

Sometimes, we want to fix Uncaught ReferenceError: React is not defined with React.

In this article, we’ll look at how to fix Uncaught ReferenceError: React is not defined with React.

How to fix Uncaught ReferenceError: React is not defined with React?

To fix Uncaught ReferenceError: React is not defined with React, we can change the Babel config.

For instance, we write

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

to enable the React presets to run automatically at runtime to add React to where it’s needed in our code in .babelrc.

This works with React 17 and Babel.

Conclusion

To fix Uncaught ReferenceError: React is not defined with React, we can change the Babel config.

Sometimes, we want to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux.

In this article, we’ll look at how to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux.

How to fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux?

To fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux, we call the connect function with the component to make the dispatch prop available within the component.

For instance, we write

import { connect } from "react-redux";

//...

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    },
  };
};

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

to add the mapStateToProps and mapDispatchToProps functions to make the Redux state and the dispatch function available to components respectively.

And then we call connect with both functions to return another function.

We then call the returned function with TodoList and assign the returned component to VisibleTodoList to make dispatch available in VisibleTodoList as a prop.

Conclusion

To fix ‘dispatch’ is not a function when argument to mapToDispatchToProps() error in React and Redux, we call the connect function with the component to make the dispatch prop available within the component.