[FIXED] How to write an element's attributes from the data of an array in React.js

Issue

I am trying to create an input component that receive and add functions to the specific trigger type. Here is my code. But it doesn't work as my wish. Can Someone help me to achieve this.

Main Page👇

import CustomTextInput from "./customTextInput";

const test=()=>{
    alert("test");
}
const test1=()=>{
    alert("test1");
}

const MainPage=()=>{
    return(
        <CustomTextInput
            placeholder="example"
            events={[
                {trigger: "onClick", action: test},
                {trigger: "onKeyUp", action: test1},
            ]}
        />
    )
}

Component (customTextInput.js)👇

const CustomTextInput=(props)=>{
    <input
        type="text"
        placeholder={props.placeholder}
        {
            props.events?.map((event, i)=>{
                return(
                    {eval(event.trigger)=event.action}
                )
            })
        }
    />
}
export default CustomTextInput;

when my code is look like given code, I got this error "Parsing error: Unexpected token, expected '...'"

I've tried adding each trigger as each prop, but its very difficult to manage. If I do so, I have to add triggers one by one in my component. So I need to add map to do this

Solution

It would be better to change the structure you pass the events to the child component, just add the event name as a property name and the event handler as a value.

Main Page👇

import CustomTextInput from "./customTextInput";

const test=()=>{
    alert("test");
}
const test1=()=>{
    alert("test1");
}

const MainPage=()=>{
    return(
        <CustomTextInput
            placeholder="example"
            events={{
                "onClick": test,
                "onKeyUp": test1,
            }}
        />
    )
}

Then you can use the spread operator to pass it to the input. Component (customTextInput.js)👇

const CustomTextInput=(props)=>{
    <input
        type="text"
        placeholder={props.placeholder}
        {
            ...props.events
        }
    />
}
export default CustomTextInput;

---

If for some reason you want to keep the same structure you need to reduce it in the child component to structure of event name as a property and event handler as a value.

import CustomTextInput from "./customTextInput";

const test=()=>{
    alert("test");
}
const test1=()=>{
    alert("test1");
}

const MainPage=()=>{
    return(
        <CustomTextInput
            placeholder="example"
            events={[
                {trigger: "onClick", action: test},
                {trigger: "onKeyUp", action: test1},
            ]}
        />
    )
}

Component (customTextInput.js)👇

const CustomTextInput=(props)=>{
    <input
        type="text"
        placeholder={props.placeholder}
        {
            ...props.events.reduce((acc, item) => {
               return { ...acc, [item.trigger]: item.action }
            }, {})
        }
    />
}
export default CustomTextInput;

Answered By - Mina
Answer Checked By - - Katrina (ReactFix Volunteer)