CODEWITHSUNDEEP
javascript
Non
Non

Reputation: 8589

How to vertically render an array

I am trying to render an Array vertically

This is how it is been displayed so far

enter image description here

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

Upvotes: 1

Views: 536

Answers (2)

Vidul
Vidul

Reputation: 10528

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>

Upvotes: 1

Oriol
Oriol

Reputation: 288100

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; }

Upvotes: 2

Related Questions