Category: JavaScript

Sometimes, we want to set selected value of a select drop down to null with React.

In this article, we’ll look at how to set selected value of a select drop down to null with React.

How to set selected value of a select drop down to null with React?

To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      <select
        onChange={(e) => setSelected(e.target.value || null)}
        value={selected || ""}
      >
        <option value=""></option>
        <option value="1">cook dinner</option>
        <option value="2">do dishes</option>
        <option value="3">walk dog</option>
      </select>
    </div>
  );
}

to set onChange to a function that calls setSelected to e.target.value which is the selected value if it’s truthy.

Otherwise, we set it to null.

Next, we set the value prop to selected if it’s truthy and an empty string otherwise.

Since null is falsy, value will be an empty string if selected is null, which matches the value attribute of the first choice.

As a result, when we select the first choice, the empty option will be displayed.

Conclusion

To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null.

Sometimes, we want to retrieve dynamic child key upon emission of an event with React.

In this article, we’ll look at how to retrieve dynamic child key upon emission of an event with React.

How to retrieve dynamic child key upon emission of an event with React?

To retrieve dynamic child key upon emission of an event with React, we can store the key as a data- attribute.

Then we can get the data- attribute value from the dataset property.

For instance, we write:

import React from "react";

const ChildComponent = ({ changeCallback, dataKey }) => {
  return (
    <div>
      <input type="text" onChange={changeCallback} data-key={dataKey} />
    </div>
  );
};

export default function App() {
  const changeCallback = (evt) => {
    console.log(evt.target.dataset.key);
  };

  return (
    <div>
      <ChildComponent changeCallback={changeCallback} dataKey="abc" />
    </div>
  );
}

We create the ChildComponent component that renders an input element with the data-key attribute set to the dataKey prop’s value.

Also, set set the onChange prop of the input to changeCallback.

Next, we define changeCallback in App that gets the data-key attribute value with evt.target.dataset.key.

We render ChildComponent with changeCallback and dataKey set so that when we type in the input, we see the data-key attribute value logged.

Cobnclusion

To retrieve dynamic child key upon emission of an event with React, we can store the key as a data- attribute.

Then we can get the data- attribute value from the dataset property.

Sometimes, we want to handle visibility=hidden with React.

In this article, we’ll look at how to handle visibility=hidden with React.

How to handle visibility=hidden with React?

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow((s) => !s)}>toggle</button>
      <div style={{ visibility: show ? "visible" : "hidden" }}>hello world</div>
    </div>
  );
}

to add a div that can be toggled by the button.

We define the show state with the useState hook.

Then we add a button that has the onClick prop set to a function that calls setShow to toggle the value of show.

Next, we add a div that has the style prop with the visibility property set to 'visible' if show is true and 'hidden' otherwise.

As a result, when we click on toggle, we’ll see the div being toggled on and off.

Conclusion

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.

Sometimes, we want to reset a React element.

In this article, we’ll look at how to reset a React element.

How to reset a React element?

To reset a React element, we can change the value of the key prop of the element.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [key, setKey] = useState();

  return (
    <div>
      <button onClick={() => setKey(Math.random())}>reload</button>
      <div key={key}>{Math.random()}</div>
    </div>
  );
}

We define the key state with the useState hook.

Then we add a button with the onClick prop set to a function that calls setKey with a random number.

Next, we assign the key state as the value of the key prop.

As a result, we should see the random number in the div change when we click on the button.

Conclusion

To reset a React element, we can change the value of the key prop of the element.

Sometimes, we want to fix the can not submit form with react-bootstrap issue.

In this article, we’ll look at how to fix the can not submit form with react-bootstrap issue.

How to fix the can not submit form with react-bootstrap issue?

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.

For instance, we write:

import React from "react";
import { FormGroup, Button, FormControl } from "react-bootstrap";

export default function App() {
  const gotEmail = (event) => {
    event.preventDefault();
    console.log("got email");
  };

  return (
    <div>
      <form onSubmit={gotEmail}>
        <FormGroup role="form">
          <FormControl type="text" className="form-control" />
          <Button
            className="btn btn-primary btn-large centerButton"
            type="submit"
          >
            Send
          </Button>
        </FormGroup>
      </form>
    </div>
  );
}

We wrap the form element around the FormGroup element to create the form.

Then we set the onSubmit prop to the gotEmail function.

In gotEmail, we call event.preventDefault to prevent the default server-side form submission behavior.

As a result, when we click Send, we see 'got email' logged instead of submitting the form on server-side and reloading the page.

Conclusion

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.