CODEWITHSUNDEEP
reactjsdropdown
kumar
kumar

Reputation: 11

Render multiple lines for each item dropdown in React

How can I render multiple lines for each item in the dropdown. Ex: I need to display address1 in first-line and city, the state in second line for each item in the dropdown. \n and \br doesn't work. Any help would be appreciated.

React.render(
    <Dropdown label="Dropdown Label">
      <DropdownItem label="1 main street \n  sacramento, california" value="Number 1" />
      <DropdownItem label="2 main street \n  stockton, california" value="2" />
    </Dropdown>,
  document.getElementById('app')
);

Upvotes: 0

Views: 3465

Answers (3)

0xAnon
0xAnon

Reputation: 897

here you go , as per your requirement:

import React from "react";
import ReactDOM from "react-dom";
const DropdownItem = props => {
  return (
    <option label={props.value} value={props.label}>
      {props.value}
    </option>
  );
};

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange = e => {
    this.setState({ value: String(e.target.value) });
  };
  render() {
    return (
      <>
        <select value={this.state.value} onChange={this.handleChange}>
          {this.props.children.map(DropdownItem => {
            return DropdownItem;
          })}
        </select>
        <div>
          {this.state.value.split("\\n").map((item, i) => {
            return <p key={i}>{item}</p>;
          })}
        </div>
      </>
    );
  }
}

ReactDOM.render(
  <Dropdown label="Dropdown Label">
    <DropdownItem
      label="1 main street \n sacramento, california"
      value="Number 1"
    />
    <DropdownItem
      label="2 main street \n stockton, california"
      value="Number 2"
    />
  </Dropdown>,
  document.getElementById("app")
);

https://codesandbox.io/s/react-hooks-counter-demo-vjocy

Upvotes: 0

Ayesha Iftikhar
Ayesha Iftikhar

Reputation: 1178

If you have a dropdown list like the following:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

In most cases, this dropdown list will be dynamic, Its better to keep it in an array and then use javascript higher order function to map over it

const optionsList = [
   {
      name: 'Volvo',
      value: 'volvo',
   },
   {
     name: 'Saab',
     value: 'saab',
   },
  // And the no of drop down items could be dynamic
];

// Now in your render method
React.render(
    <select onChange={onChangeFunction}>
    {optionsList.map(option => (
      <option value={option.value} key={option.name}>{option.name}</option>
    ))}
    </select>,
  document.getElementById('app')
);

// In this way your dropdown will appear as a dropdown list on the newline without using breaks or newlines

P.S. Dont forget to miss the key while mapping options. React will thank you ;)

And now you have all the flexiblity to make this select your custom component by giving it styles of your choice.

Upvotes: 1

Sarbraj Dulai
Sarbraj Dulai

Reputation: 180

You can use JavaScript's Map function. You can have city names as an array and have their position index as the key and name of the city as value. More information can be found in React documentation and an example can be seen here. Example below:

  function Filter(props){
  const Items = ['All', 'Car', 'Truck', 'Convetible'];
  const MappingItems = Items.map((Item) => <option>{Item}</option> );
  return (
    <div style={divStyle}>
      New Only <input type="checkbox" /><br /><br />
      Select Type <select>
        {MappingItems}
      </select>
    </div>
  )
}

ReactDOM.render(
  <Filter />,
  document.getElementById('root')
);

Hope this helps!

Upvotes: 1

Related Questions