CODEWITHSUNDEEP
javascriptreactjsdrop-down-menusemantic-uisemantic-ui-react
Coder
Coder

Reputation: 610

How to add a new line in text field of dropdown in semantic-ui react?

Here is the render function 

render(){
    const { members, user } = this.props;
    let memberOptions = [];
    members.forEach((member, i) => {
      memberOptions.push({
        key: i,
        text: member.user.name,
        value: member.user.id,
        image: { avatar: true, src: member.user.gravatar },
      });
    });
    return (
      <Dropdown placeholder='Select User' fluid selection options={memberOptions} />
    )
  }

This will render perfectly. But I also want to add one more text(say email) in this text field in a new line. So that dropdown items show similar to this : https://react.semantic-ui.com/elements/list#list-example-relaxed

How can I achieve this?

Upvotes: 0

Views: 1606

Answers (1)

brianespinosa
brianespinosa

Reputation: 2393

Akhila, I would recommend that you use the content prop instead of the text prop for your Dropdown.Item that you are rendering from your memberOptions array. The text prop specifically expects a string. The content prop will accept anything, including other React components or nodes. So instead of returning text as a string, you could do something like this for content, maybe as a separate class method on your component:

const renderItemContent = (member) => {
  const {
    email,
    name,
  } = member.user;

  const emailStyle = {
    color    : '#333',
    fontSize : '.875em',
  }

  return(
    <React.Fragment>
      {name}
      {email &&
        <div style={emailStyle}>{email}</div>
      }
    </React.Fragment>
  )
}

Then set content: this.renderItemContent(member) on your memberOptionsArray.

Upvotes: 3

Related Questions