How do you render Array, Strings and Numbers in React 16 Version?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of React conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
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:
const ReactJSDevs = () => {
return [
<li key="1">John</li>,
<li key="2">Jackie</li>,
<li key="3">Jordan</li>,
];
};
Fragment approach (preferred):
const ReactJSDevs = () => {
return (
<>
<li>John</li>
<li>Jackie</li>
<li>Jordan</li>
</>
);
};
You can also merge this array of items in another array component.
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.
render() {
return 'Welcome to ReactJS questions';
}
// Number
render() {
return 2018;
}
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.