phileras phileras - 2 months ago 9
React JSX Question

How to select one item in a dropdown which shows the data from an array in react?

Im new to React, I have built a dropdown in ES6 react which shows one image and a text line. It works fine and fetches the data from a data array and shows it. Now I have to do one thing: when the user clicks on an option in the dropdown, the dropdown closes and shows the selected option instead the original one [0]. I tried with javascript sentences taking the innerHTHML, but that is not the way to do it.

Here is the code:

import React from "react";

class StatusBarCompaniesView extends React.Component {

mixins: [ClickAwayable]


constructor(props) {
super(props)
this.state = {dropdown: false}
this.handleClick = this.handleClick.bind(this)
}

handleClick() {
this.setState({ dropdown: !this.state.dropdown });
}

clickSelectOption(e){
console.log(e.target);
e.stopPropagation();
var valueNode = this.refs.dropDownValue.getDOMNode();
valueNode.innerHTML = e.target.innerHTML;
valueNode.setAttribute('data-value',e.target.getAttribute('data-value'))
}

render() {
var me = this;
var company_items = [
{ payload: '1', imageurl: 'images/avatar.png', text: 'Burger Apps, SL' },
{ payload: '2', imageurl: 'images/avatar-apple.png', text: 'Apple Computer Inc' },
{ payload: '3', imageurl: 'images/avatar-hp.png', text: 'Hewlett Packard' },
{ payload: '4', imageurl: 'images/avatar-apple.png', text: 'Eyects Systems' }
];

var cx = require('classnames');
var dropdown = cx ({
'aui-profit-statusbar-companies-dropdown-container' : true,
'dropdown' : this.state.dropdown
});

var cx = require('classnames');
var selected = cx ({
'aui-profit-statusbar-companies-container' : true,
'selected' : this.state.dropdown
});

return (
<div className={selected} onClick={this.handleClick}>
<div ref="dropDownValue">
<div className="aui-profit-statusbar-selected-company-logo"><img src={company_items[0].imageurl}/></div>
<div className="aui-profit-statusbar-selected-company-name">{company_items[0].text}</div>
</div>
<div className={dropdown}>
{company_items.map(function(option, index){
return (
<div key={index} className="option" data-value={option.payload} onClick={me.clickSelectOption.bind(me)}>
<div className="aui-profit-statusbar-companies-logo"><img src={option.imageurl}/></div>
<div className="aui-profit-statusbar-companies-name">{option.text}</div>
</div>

);
})}
</div>
</div>
);
}
};


module.exports = StatusBarCompaniesView;


Any kind of help is welcome! thanks!

Answer

When you create the dropdown option you already know its value, so just bind with that, so the callback is called with the correct parameter, saving you from inspecting the DOM, eg:

in render()

{company_items.map(function(option, index){
    return (
        <div key={index} className="option" onClick={me.clickSelectOption.bind(me, option.payload)}>
            <div className="aui-profit-statusbar-companies-logo"><img src={option.imageurl}/></div>
            <div className="aui-profit-statusbar-companies-name">{option.text}</div>
        </div>

    );
})}  

Then in the handler:

clickSelectOption(payload){
    console.log(payload);
    this.setState({ selected: payload });
}
Comments