如何垂直渲染数组

Question

I am trying to render an Array vertically

This is how it is been displayed so far

But I need it like this

Travel

Heart

Earth

Blackjack

and so on...

here is the code

let textareaStyle = {
  width: '100%'
}, people = [
    'Hello',
    'Travel',
    'Heart',
    'Earth',
    'Hills',
    'Blackjack',
    'Casino',
    'Alberto',
    'Marcelo',
    'Jorge'
  ], displayResult;

class Login extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    return (
         <input type="text" onChange={this._onChange.bind(this)} style={textareaStyle}
                     onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
         <p>{this.state.result}</p>
    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.filter(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result: autoCompleteResult.join(', ')});
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}


export default Login;

so here I am displaying the results

<p>{this.state.result}</p>

there is where I need to display it vertically, like a dropdown

Answer 1

The function matchPeople returns an array.

Then, you set that array as the innerHTML of #result .

However, innerHTML expects a string, so it uses the toString method to convert the array to an string. That method concatenates the items in the array with a comma separator.

Instead, you can try joining the array with a <br /> element as a separator, which will produce line breaks between the results.

result.innerHTML = autoCompleteResult.join('<br />');

Alternatively, since you are only dealing with text, I recommend avoiding innerHTML and using textContent instead, with a newline character as a separator.

result.textContent = autoCompleteResult.join('\n');

Note newlines are collapsed into a normal space by default. To prevent it, use white-space :

#result { white-space: pre-line; }

Answer 2

filter is not a mutator in respect to each element; the map method is appropriate:

 var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan']; function matchPeople(input) { var reg = new RegExp(input.split('').join('\\\\w*').replace(/\\W/, ""), 'i'); return people.map(function(person) { if (person.match(reg)) { return '<br>' + person; }; }); } function changeInput(val) { var autoCompleteResult = matchPeople(val); document.getElementById("result").innerHTML = autoCompleteResult; } 

 <input type="text" onkeyup="changeInput(this.value)"> <div id="result"> </div>