Categories
React Answers

How to Edit Multiple Controlled Input Components’ Values in React?

Sometimes, we want to edit the value of multiple controlled input components in React.

In this article, we’ll look at how to edit the value of multiple controlled input components in React.

Edit Multiple Controlled Input Components’ Values in React

To edit the value of multiple controlled input components in React, we can create a function that returns the onChange callback for each input.

For instance, we can write:

import React, { useState } from "react";

export default function App() {
  const [contact, setContact] = useState({ firstName: "", lastName: "" });

  const handleChange = (propertyName) => (event) =>
    setContact((c) => ({ ...c, [propertyName]: event.target.value }));

  return (
    <div>
      <input
        type="text"
        onChange={handleChange("firstName")}
        value={contact.firstName}
      />
      <input
        type="text"
        onChange={handleChange("lastName")}
        value={contact.lastName}
      />
    </div>
  );
}

We have the contact state which is set to an object with the firstName and lastName properties as its initial value.

Then we create the handleChange function that takes propertyName and calls setContact to update the contact state’s propertyName property with the inputted value, which is stored in e.target.value .

Then we have 2 inputs with the value props set to each contact property.

And the onChange props are set to functions returned by handleChange with the propertyName to set the contact ‘s firstName or lastName property depending on the field.

Conclusion

To edit the value of multiple controlled input components in React, we can create a function that returns the onChange callback for each input.

Categories
React Answers

How to Get the HTML5 Input Slider Working in React?

Sometimes, we want to get the HTML5 input slider working in React.

In this article, we’ll look at how to get the HTML5 input slider working in React.

Get the HTML5 Input Slider Working in React

To get the HTML5 input slider working in React, we either set the value and onChange props or we can leave them both out.

For instance, we can write:

import React, { useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <input
      type="range"
      min="0"
      max="5"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      step="1"
    />
  );
}

We add the value prop and set it to the value state.

And we set the onChange prop to a function that calls setValue with e.target.value , which has the selected number value.

This makes the range slider a controlled component which means its value is controlled by a state.

We can also leave them both out if we don’t want to bind the value of the range slider to a state.

This would make it an uncontrolled input.

Conclusion

To get the HTML5 input slider working in React, we either set the value and onChange props or we can leave them both out.

Categories
React Answers

How to Format Code with the pre Tag in React and JSX?

Sometimes, we want to format code with the pre tag in React and JSX.

In this article, we’ll look at how to format code with the pre tag in React and JSX.

Format Code with the pre Tag in React and JSX

To format code with the pre tag in React and JSX, we should put the code we want to display in template literals.

For instance, we can write:

import React from "react";

export default function App() {
  const foo = 1;
  const bar = '"a b   c"';

  return (
    <pre>{`
    var foo = ${foo};
    var bar = ${bar};
  `}</pre>
  );
}

We interpolate the foo and bar strings in the code template string.

All the spaces in the template string are preserved.

Conclusion

To format code with the pre tag in React and JSX, we should put the code we want to display in template literals.

Categories
React Answers

How to Set the Content of an Iframe of a React Component?

Sometimes, we want to set the content of an iframe of a React component.

In this article, we’ll look at how to set the content of an iframe of a React component.

Set the Content of an Iframe of a React Component

To set the content of an iframe of a React component, we can set the srcDoc prop of the iframe element.

For instance, we can write:

import React from "react";

export default function App() {
  const myHTML = `<h1>Hello World</h1>`;
  return (
    <div>
      <iframe srcDoc={myHTML} title="hello" />
    </div>
  );
}

to set the srcDoc prop to the HTML string that we want to display as the iframe’s content.

Therefore, we should see ‘Hello World’ displayed inside the iframe.

Conclusion

To set the content of an iframe of a React component, we can set the srcDoc prop of the iframe element.

Categories
React Answers

How to Add the CSS display: none Style within a Conditional Expression with React?

Sometimes, we want to add the CSS display: none style within a conditional expression with React.

In this article, we’ll look at how to add the CSS display: none style within a conditional expression with React.

Add the CSS display: none Style within a Conditional Expression with React

To add the CSS display: none style within a conditional expression with React, we can pass in an object into the style prop of an element.

For instance, we can 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={{ display: show ? "block" : "none" }}>hello</div>
    </div>
  );
}

We have the show state that we create with the useState hook.

Then we set the onClick prop of the button to a function that calls setShow to toggle show between true and false .

And then we can set the display CSS property of the div with a ternary expression.

If show is true , then set it to 'block' .

Otherwise, we set it to 'none' .

Conclusion

To add the CSS display: none style within a conditional expression with React, we can pass in an object into the style prop of an element.