Add dynamic attribute in ReactJS

Question

Button component which renders a button based on prop dataSrc send by parent App.

 export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>
                {this.props.dataSrc.map((element, index) => {
                    return <button 
                        key={index}
                        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
                        type="button"
                        disabled={element.disabled}>
                            {element.label}
                    </button>
                })} 

            </div>

        );      
    }
}

Parent component App sends dataSrc to Button.

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        const btnSrc = [
            {
                "label":"Save",
                "class":"user_information_save",
                "disabled":false
            },
            {
                "label":"Cancel",
                "class":"userCancel",
                "disabled":false
            }
        ]
        return <Button dataSrc={btnSrc} /> 
    }
}

Now everything is fine. Here comes the scenario, the btnSrc in App(parent) component will be look alike:

const btnSrc = [
        {
            "label":"Save",
            "class":"user_information_save",
            "disabled":false
        },
        {
            "label":"Cancel",
            "class":"userCancel",
            "disabled":false,
            "data-id": "someID", // this will be dynamic
            "name": "someName" // this will be dynamic
            "onClick": this.someFunctionaName // this will be dynamic
        }
    ]

Now the src is changed, but little confused in Button component to render those dynamic data added recently.

export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>
                {this.props.dataSrc.map((element, index) => {
                    return <button 
                        key={index}
                        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
                        type="button"
                        disabled={element.disabled}

                        //here i want to have those dynamic data "data-id": "someID", "name": "someName" here 
                        // and i want to add onClick also here which will be loaded from btnSrc

                        >
                            {element.label}
                    </button>
                })} 

            </div>

        );      
    }
}

How can i add those dynamic custom object values to existing Button component and I do not know how to bind events to in .map too. Code Demo

Any help would be helpful.

This is just a guess, but maybe your key property is not good here as it will have the same value when data changed. It just represents the position inside of the map but does not relate to the entry. Also, i am not sure but maybe you need change component state to trigger rerendering. — Andre Albert
– Andre Albert, Commented Mar 15, 2018 at 7:39

Mayank Shukla · Accepted Answer · 2018-03-15 07:43:46Z

I think, there are two solutions possible:

1- Use Spread syntax ..., and pass put all the passed values on button, by this was you don't need define each property separately. Like this:

return <button 
        key={index}
        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
        type="button"
        {...element}
    >
        {element.label}
</button>

Now if you pass onClick then only it will be assigned otherwise not.

2- Use destructuring and assign the default value if not passed from the parent.

Like this:

{this.props.dataSrc.map((element, index) => {
    const {onClick=null, dataGrid=''} = element;
    return <button 
            key={index}
            className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
            type="button"
            disabled={element.disabled}
            onClick={onClick}
            data-grid={dataGrid}
        >
            {element.label}
    </button>
})}

Working Example.

Collectives™ on Stack Overflow

Add dynamic attribute in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related