JSFiddle - React, Tailwind, and code Playground

by Armen Sanoyan

JavaScript

import React from'react';
import ReactDOM from 'react-dom';
import Countries from './Countries';



const listItems = Countries.map((number) =>
  <ul>{number.name}</ul>
);


class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '',
                  eachCountry: ''  
                };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value 
);
  
  let matches = Countries.filter(v => v.name.toLowerCase().includes(this.state.value
        ));
  console.log(matches);
    event.preventDefault();
    this.state.eachCountry = matches.name;
    
    const filterCountries =matches.map((filterCountry) => <li>{filterCountry.name}</li> 
);
  alert(filterCountries.name);
  this.setState({eachCountry: {matches}})
  }

  render() 
  {
    const divlistItem = {
    overflow: 'auto',
    height: '500px',
    width: '400px',
    float: 'none',
    margin: '0 auto',
    border: '1px solid black',
  };

    const filter = {
    textAlign:'center',
    float: 'none',
    margin: '0 auto',
  }
    return (
    <div style={filter}>
      <div>{this.state.eachCountry}</div>
      <form onSubmit={this.handleSubmit}>
        <label>
          Name::{this.state.eachCountry}
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <div style={divlistItem}>
          {listItems}
        </div>

        

        <input type="submit" value="Submit" />
      </form>
    </div>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('app')
);