Q165: How do you render Array, Strings and Numbers in React 16 Version? - React & Modern Frontend (445 Qs)

Note: This question references React 16. These features remain valid in current React versions (18/19).

Arrays: Starting with React 16, you can return multiple sibling elements without a wrapping element by returning an array or using Fragments.

Array approach:

jsx

const ReactJSDevs = () => {
return [
  <li key="1">John</li>,
  <li key="2">Jackie</li>,
  <li key="3">Jordan</li>,
];
};

Fragment approach (preferred):

jsx

const ReactJSDevs = () => {
return (
  <>
    <li>John</li>
    <li>Jackie</li>
    <li>Jordan</li>
  </>
);
};

You can also merge this array of items in another array component.

jsx

const JSDevs = () => {
return (
  <ul>
    <li>Brad</li>
    <li>Brodge</li>
    <ReactJSDevs />
    <li>Brandon</li>
  </ul>
);
};

Strings and Numbers: You can also return string and number type from the render method.

jsx

render() {
return 'Welcome to ReactJS questions';
}
// Number
render() {
return 2018;
}