Is running reactstrap dropdown in react jsx

Question

New to react and using reactstrap. Am simply trying to add in a dropdown menu and issue running this code as it errors on syntax intially, but then when I revise, it throws more errors. Here is the code:

import React from 'react';
import {
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import PropTypes from 'prop-types';

const UserPreview = ({user}) => (

this.toggle = this.toggle.bind(this);
this.state = {
  DropdownOpen: false
  };
}

toggle() {
  this.setState({
    DropdownOpen: !this.state.DropdownOpen
  });
}

  <tr className="user">
    <td>
      <Media>
        <img
          alt={`${user.name} avatar`}
          className="avatar d-flex mr-3"
          src={user.url} />
        <Media body>{user.name}</Media>
      </Media>
    </td>
    <td>
      <Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Admin
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Read</DropdownItem>
          <DropdownItem>Write</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </td>
  </tr>
);

UserPreview.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    // TODO: add an url proptype.
    url: PropTypes.string,
  }).isRequired,
};

export default UserPreview;

Define what errors are occurring? Can you make your question as specific as possible, maybe make an [MVCE](https://stackoverflow.com/help/mcve)? — Icepickle, Jun 26 '17 at 18:35

Anurag Awasthi · Answer 1 · 2017-06-26T18:42:23.313

Your code contains a lot of errors. I have removed them and added comments,

import React from 'react';
import {
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';

import PropTypes from 'prop-types';

//you should use class if your component has its own state
class UserPreview extends React.Component{

    //use constructor to define state and initialize component
    constructor(props){
        super(props)
        this.toggle = this.toggle.bind(this);
        this.state = {
            DropdownOpen: false
        }
    }


    toggle() {
        this.setState({
            DropdownOpen: !this.state.DropdownOpen
        });
    }
    render(){
        //you will need to bind toggle so that you can use setstate in it.
        return(
            <tr className="user">
                <td>
                    <Media>
                        <img
                            alt={`${user.name} avatar`}
                            className="avatar d-flex mr-3"
                            src={user.url} />
                        <Media body>{user.name}</Media>
                    </Media>
                </td>
            <td>
                <Dropdown isOpen={this.state.DropdownOpen} toggle=
                {this.toggle.bind(this)}>
                    <DropdownToggle caret>
                        Admin
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem>Read</DropdownItem>
                        <DropdownItem>Write</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </td>
        </tr>
    )
}
}

UserPreview.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    // TODO: add an url proptype.
    url: PropTypes.string,
  }).isRequired,
};

export default UserPreview;

why remove the user in here as it references another master component? — Mark, Jun 26 '17 at 21:22

Is running reactstrap dropdown in react jsx

1 Answers1