How to vertically render an array

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

Why don't you solve it via CSS? Just use lists and then you can define in the CSS how to display them. Layouting via HTML is not really nice. — Martin Krämer, Aug 31 '15 at 22:41
http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/html/html_lists.asp — Martin Krämer, Aug 31 '15 at 22:43
@MartinKrämer I know what is a list, what I don't know is how to display that in ReactJS as a list. — Non, Aug 31 '15 at 22:44
[**Here**](http://jsfiddle.net/qo9yzj3r/39/) is an example using an unordered list. — DavidDomain, Aug 31 '15 at 23:26

score 2 · Answer 1 · answered Aug 31 '15 at 23:10

2

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

answered Aug 31 '15 at 23:10

Oriol

274,082
63
437
513

I already tried like this `this.setState({result: autoCompleteResult.join('
')});` but all I get is `Hello
Travel
Heart
` – Non Aug 31 '15 at 23:15
Not in reactjs. This framework makes me discover the evil inside of me – Non Aug 31 '15 at 23:17
@NietzscheProgrammer It seems it is escaping the html, or not parsing it as html at all. Try using `\n` and `white-space`. – Oriol Aug 31 '15 at 23:19
@NietzscheProgrammer You mean this [problem](http://stackoverflow.com/a/19277723/1367611)? – Vidul Aug 31 '15 at 23:24

score 1 · Accepted Answer · answered Aug 31 '15 at 23:19

1

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>

answered Aug 31 '15 at 23:19

Vidul

10,128
2
18
20

it works for you in pure js as in the example. But it doesn't work for me as I am with reactjs. :/ – Non Aug 31 '15 at 23:25
@NietzscheProgrammer It is IMO. CSS & HTML are about design (descriptive, not programming languages - think about nouns), JS is about behaviour (verbs). And you have tried to mix the roles. – Vidul Aug 31 '15 at 23:42

How to vertically render an array

2 Answers2