如何从 React.js 中的数组数据写入元素的属性

Question

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

Answer 1

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;

Answer 2

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