Category: React

Sometimes, we want to uncheck radio buttons in React.

In this article, we’ll look at how to uncheck radio buttons in React.

How to uncheck radio buttons in React?

To uncheck radio buttons in React, we can set the checked prop of the radio button to false.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState({ apple: true, orange: false });

  const changeRadio = (e) => {
    setChecked(() => {
      return {
        apple: false,
        orange: false,
        [e.target.value]: true
      };
    });
  };

  return (
    <>
      <button
        onClick={() => setChecked(() => ({ apple: false, orange: false }))}
      >
        uncheck
      </button>
      <label>
        <input
          type="radio"
          checked={checked.apple}
          value="apple"
          name="choice"
          onChange={changeRadio}
        />
        apple
      </label>

      <label>
        <input
          type="radio"
          checked={checked.orange}
          value="orange"
          name="choice"
          onChange={changeRadio}
        />
        orange
      </label>
    </>
  );
}

We have the checked state that we use to set the checked prop of each radio button.

Then we set onChange to the changeRadio function.

In changeRadio, we call setChecked with a function that sets apple and orange both to false.

Then we set the radio button that we clicked on to be checked by adding [e.target.value]: true.

We also add a button that calls setChecked with a function that returns { apple: false, orange: false } to uncheck both checkboxes.

Finally, we set the checked prop of each radio button to the property of the checked state to update the checked value.

Now when we click the uncheck button, both radio buttons should be unchecked.

Conclusion

To uncheck radio buttons in React, we can set the checked prop of the radio button to false.

Sometimes, we want to uncheck a checkbox programmatically in React.

In this article, we’ll look at how to uncheck a checkbox programmatically in React.

How to uncheck a checkbox programmatically in React?

To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      <button onClick={() => setChecked((c) => !c)}>toggle</button>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    </>
  );
}

We have the checked state that we used to set the checked prop of the checkbox.

Then we add a button that calls setChecked to toggle the checked value when we click the button.

Next, we set the onChange prop to a function that calls setChecked with e.target.checked to update the checkbox’s checked value by setting the checked state.

e.target.checked has the latest checked value of the checkbox.

Therefore, when we click toggle, we see the checkbox toggle between checked and unchecked.

And we can also check and uncheck the checkbox by clicking the checkbox.

Conclusion

To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state.

Sometimes, we want to dynamically nest React components.

In this article, we’ll look at how to dynamically nest React components.

How to dynamically nest React components?

To dynamically nest React components, we can create a component that takes the children prop.

Then we can render the children prop in the component.

For instance, we write:

import React from "react";

const Group = ({ children }) => <fieldset>{children}</fieldset>;

export default function App() {
  return (
    <Group>
      <input />
      <input />
      <input />
    </Group>
  );
}

to create the Group component that takes the children. children can have one or an array of components and strings.

Therefore, we can nest multiple input elements in Group as we did in App.

And we’ll see 3 inputs in the fieldset element as a result.

Conclusion

To dynamically nest React components, we can create a component that takes the children prop.

Then we can render the children prop in the component.

Sometimes, we want to render a string as React component.

In this article, we’ll look at how to render a string as React component.

How to render a string as React component?

To render a string as React component, we can put the components we want to render in an object.

Then we can render the components by accessing them from the object with a string as the key.

For instance, we write:

import React from "react";

const Foo = () => <p>foo</p>;
const Bar = () => <p>bar</p>;

const Components = {
  Foo,
  Bar
};

const FooComponent = Components["Foo"];

export default function App() {
  return <FooComponent />;
}

We have the Foo and Bar components.

And we put them Foo and Bar into the Components Object.

Next, we access the Foo component from Components with:

const FooComponent = Components["Foo"];

And finally, we render it with <FooComponent />.

Conclusion

To render a string as React component, we can put the components we want to render in an object.

Then we can render the components by accessing them from the object with a string as the key.

Sometimes, we want to pass optional elements to a component as a prop in React.

In this article, we’ll look at how to pass optional elements to a component as a prop in React.

How to pass optional elements to a component as a prop in React?

To pass optional elements to a component as a prop in React, we can create a component that accepts the children prop.

For instance, we write:

import React, { useState } from "react";

const Panel = ({ children }) => {
  return <div>{children}</div>;
};

const Title = ({ children }) => {
  return <h1>{children}</h1>;
};

export default function App() {
  return (
    <Panel>
      <Title>hello world</Title>
    </Panel>
  );
}

We defined the Panel and Title components that take the children prop.

children can take one or more React components or strings.

We set 'hello world' as the value of Title‘s children prop.

And we set Title as the value of Panel‘s children prop.

So we see ‘hello world’ displayed in big text.

Conclusion

To pass optional elements to a component as a prop in React, we can create a component that accepts the children prop.