Map Data Based off ID - reactjs

Question

If i'm using the map function, how would you limit it by ID, e.g I only want to map ID 1,2 out of 3 possible datapoints?
What's the industry standard solution?
export const userInputs = [
{
id: 1,
label: "First Name",
type: "text",
placeholder: "Remy",
},
{
id: 2,
label: "Surname",
type: "text",
placeholder: "Sharp",
},
{
id: 3,
label: "Email",
type: "email",
placeholder: "remysharp#gmail.com",
}
];
Mapping like this, for email, i'd only like name and surname to be mapped inputs.
{inputs.map((input) => (
<FormInput className="formInput" key={input.id}>
<UserInput type={input.type} placeholder={input.placeholder} />
</FormInput>
))}

Answer 1

Use for loop.
function SomeComponent() {
const useInputs = [
/*...*/
]
const limit = 2
const userInputDomList = []
for (let i = 0; i < userInputs.length; i++) {
if (limit >= i) break
userInputDomList.push(<div key={userInputs[i].id}> </div>)
}
return <section>{userInputDomList}</section>
}
you could use .filter or .map for same result but it will loop over all elements instead of stopping at limit index.
For id based selection
function SomeComponent() {
const useInputs = [
/*...*/
]
const userInputDomList = []
// using for loop
/* for (let i = 0; i < userInputs.length; i++) {
const id = userInputs[i].id
if (id === 3) {
userInputDomList.push(<div key={id}> </div>)
break
}
} */
// using for..of
for (const userInput of userInputs) {
if (userInput.id === 3) {
userInputDomList.push(<div key={userInput.id}> </div>)
break
}
}
return <section>{userInputDomList}</section>
}
if really want reander only one item to be rendered
function RenderMatchingId({ userInputs, userInputId }) {
for (const userInput of userInputs) {
if (userInput.id === userInputId) {
return <section>found {userInput.id}</section>
}
}
// fallback
return <section>404 not found</section>
}