bnorton/dropdown.jsx Secret

Hi there, I think you should refractor your technical test to functional components. I really hope your React codebase is not in class based component because that would be like doing legacy coding.

thanks for the feedback @EmmanuelTheCoder! I find that part of the challenge of working with new and ever-changing technologies is the likelihood that some of your codebase is out of date with current best practices. Success would be to have the type of traction with your product that you get the opportunity to refactor and build on the latest and greatest. 👍

True. Wish you the best with that.

import React, { PureComponent } from 'react';

class Dropdown extends PureComponent {
// Bug: wrong name
constructor(props) {
super(props);
this.state = {
isOpen: false,
selectedItem: '',
};
}

// Bug: bind or change to arrow function
toggle = () => {
const { isOpen } = this.state;
// Bug: wrong state update
this.setState({ isOpen: !isOpen });
};

onClickItem = val => {
const { selectedItem } = this.state;
const { onChange } = this.props;
if (val !== selectedItem) {
this.setState({ selectedItem: val });
this.toggle();
if (onChange) {
onChange(val);
}
}
};

render() {
const { isOpen, selectedItem } = this.state;
const { label } = this.props;
console.log('selectedItem', selectedItem);
const childrenWithProps = React.Children.map(this.props.children, child => {
return React.isValidElement(child)
? React.cloneElement(child, { onClickItem: this.onClickItem, selectedItem })
: child;
});
return (

    <ul
      className={`${isOpen ? 'dropdown-open' : ''} dropdown-menu`}
      aria-labelledby="dropdownButton"
      role="menu"
    >
      {/* Bug: Add condition */}
      {isOpen && childrenWithProps}
    </ul>
  </div>
);

import React, {PureComponent} from 'react';

class Dropdown extends PureComponent {
/* miss spelling of the keyword constructor */
constructor(props){
super(props);
this.state = {
isOpen: false,
selectedItem: " ",
};
}
// arrow function correction
toggle = () => {
const { isOpen } = this.state;
// Bug: wrong state update
this.setState({ isOpen: !isOpen });
};

onClickItem = val => {
const { selectedItem } = this.state;
const { onChange } = this.props;
if (val !== selectedItem ){
this.setState({
selectedItem: val
});
this.toggle();
if(onChange){
onChange(val);
}
}
};

render(){
const { isOpen, selectedItem } = this.state;
const { label } = this.props;
const childrenWithProps = React.Children.map(this.props.children, child => {
return React.isValidElement(child)
? React.cloneElement(child, { onClickItem: this.onClickItem, selectedItem})
: child
});
return(

class DropdownItem extends PureComponent {
handleClick = () => {
const { href, onClickItem } = this.props;
onClickItem(href);
};

render(){
  const { children, selectedItem, href} = this.props;
  const isSelected = selectedItem === href;
  return (
    <li style={{ color: isSelected ? 'red':''}} onClick={this.handleClick}>
      {children}
    </li>
  );
}

}

export default class ExampleNav extends PureComponent {

}
}

class Dropdown extends PureComponent {
//mispelling of contructor
constuctor(props) {
super(props);
this.state = {
isOpen: false,
};
}

toggle() {
const {isOpen} = this.state;
//Error in state update instead of " this.setState({isOpen: !isOpen}"
this.setState({isOpen: isOpen});
}