Category: React

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

For instance, we write

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


//... 

<button
  onClick={(e) => {
    clickMe(e, someParameter);
  }}
>
  Click Me!
</button>

to create the clickMe function.

Then we set the button’s onClick prop to a function that calls clickMe with the e event object and someParameter.

To handle CRUD in a form component with React and Redux, we wrap the redux Provider around our app.

Then we can use Redux form to save form values in our Redux store.

For instance, we write

import React from "react";
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { modelReducer, formReducer } from "react-redux-form";

import MyForm from "./components/my-form-component";

const store = createStore(
  combineReducers({
    user: modelReducer("user", { name: "" }),
    userForm: formReducer("user"),
  })
);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <MyForm />
      </Provider>
    );
  }
}

to call createStore to create our store with the reducers created from combineReducers.

Then we write

mport React from "react";
import { connect } from "react-redux";
import { Field, Form } from "react-redux-form";

class MyForm extends React.Component {
  handleSubmit(val) {
    // ...
    console.log(val);
  }

  render() {
    let { user } = this.props;

    return (
      <Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
        <h1>Hello, {user.name}!</h1>
        <Field model="user.name">
          <input type="text" />
        </Field>
        <button>Submit!</button>
      </Form>
    );
  }
}

export default connect((state) => ({ user: state.user }))(MyForm);

to add the Form component in MyForm to create a form with redux form.

And we add the Field component to add a field.

We set model to the path of the item we save in the store.

To fix unable to fetch data from local JSON file with axios and React, we put the local JSON file in the public folder of our React project.

Then we call axios.get with the relative path to the JSON file.

For instance, we write

const handleSubmit = async (e) => {
  e.preventDefault();
  //...
  const { data } = await axios.get("./data.json");
  //...
};

to call axios.get with './data.json to get the content of data.json in the public folder in our React project.

To fix the validateDOMNesting warning with React, we shouldn’t nest anchor element in another anchor element.

For instance, we write

navigate = () => {
  //...
};

<div onClick={this.navigate}>
  <Link to="path2">Some button</Link>
  <Link to="path3">Some button</Link>
</div>

to add 2 React Router Links which render to anchor elements.

And then we set onClick on the div to the navigate method which navigates to another route programmatically.

Then we don’t have any nested anchor elements.

To fix the "Invalid prop ‘source’ supplied to Image" error with React-Native Image, we set the source prop of the Image component to the value returned by calling require with the image path.

For instance, we add the Image by writing

<Image source={require("./my-icon.png")} />;

We set the source to the value returned by require to add the image at my-icon.png.