Author: John Au-Yeung

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.

Sometimes, we want to set className with ternary operator add class ‘null’ in React.

In this article, we’ll look at how to set className with ternary operator add class ‘null’ in React.

How to set className with ternary operator add class ‘null’ in React?

To set className with ternary operator add class ‘null’ in React, we can set the class name to an empty string.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [on, setOn] = useState(false);

  return (
    <div>
      <style>
        {`.on {
          background-color: green
        }`}
      </style>
      <button onClick={() => setOn((o) => !o)}>toggle</button>
      <div className={on ? "on" : ""}>hello world</div>
    </div>
  );
}

We set className to 'on' if on is true and an empty string otherwise.

And we set the the on class to have background color green.

Therefore, when we click toggle to set on to true, we see the div having a green background color.

And if on if false, we see no background.

Conclusion

To set className with ternary operator add class ‘null’ in React, we can set the class name to an empty string.

Sometimes, we want to add validation of form input fields with React.

In this article, we’ll look at how to add validation of form input fields with React.

How to add validation of form input fields with React?

To add validation of form input fields with React, we can use a library like React Hook Form.

We can install the library with:

npm i react-hook-form

Then we can use it by writing:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("age", { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

We add an input and set the props of it by spreading the object returned by register.

We call register with the name attribute value of the input and an object with the regex pattern that we want to validate input value with.

Then we get the errors from the errors object.

And we set the onSubmit prop of the form element with the event handler function returned by handleSubmit, which only runs when all the input values are valid.

Conclusion

To add validation of form input fields with React, we can use a library like React Hook Form.