Warning: propType failed: required parameter `` `` `` `` of user is not specified in

Question

I am trying to execute a search function for my application, this is my first React application and so far I do not see any benefits.

here i have this code

let falsyData = [
    {'hello': 'greet'},
    {'Travel': 'traveling'},
    {'Heart': 'corazon'},
    {'Earth': 'tierra'},
    {'Hills': 'a name'},
    {'Blackjack': 'game'},
    {'Casino': 'gambling'}
  ];

class UniversalSearch extends Component {

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

  render () {
    let searchRes = this._matchPeople(this.state.value),
        match = searchRes.map(function(item) {
          return <Column><Paper>{item}</Paper></Column>;
        });
    return (
      <Grid>
        <Row>
          <Column>
            <TextField onChange={this._onChange.bind(this)}
                    onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
            {!!this.state.value.length &&
              <Row>
                {match}                
              </Row>
            }
          </Column>
        </Row>
      </Grid>
    );
  }

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

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

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

}

I need to do an array search falsyDatawhile these are the functions that I implement to search

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

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

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

my application returns the criteria falsyDatathat I am looking for, but returns only attributes, not properties, so how do I access these properties?

for example: If I type hello, the word helloshould be returned from falsyDataand printed on the screen, which is normal, but what about if I want to print hellowith its properties that are “welcome”, as you can see?

And also, I get this error:

: propType: prop children Row. UniversalSearch.

, , 3 , Angular | filter:, .

, - .

Answer 1

, . , ?

:

, , 3 , Angular | filter:, .

, :

// functional component without state
const FilteredList = ({things, filter}) => {
  const filtered = things.filter(t => t.search(filter) !== -1)
    return (
    <ul>
      {filtered.map(t => <li>{t}</li>)}
    </ul>
    )
}

class App extends React.Component {
  constructor ({things}) {
    super()
    this.state = {}
    this.state.things = things.split(', ')
    this.state.filter = ''
  }
  handleChange (event) {
    this.setState({filter: event.target.value})
  }
  render () {
    const things = this.state.things  // shorthands
    const filter = this.state.filter
    return (
        <div>
        <input onChange={this.handleChange.bind(this)} />
        <FilteredList things={things} filter={filter} />
      </div>
    )
  }
}

ReactDOM.render(
  <App things="asdf, lorem, and, more" />,
  document.getElementById('container')
);

jsfiddle

, angular, ( , , inn <App>, ). , , "" .

, JSX {} JavaScript. - | filter ng-repeat ng-if, ng-show?

EDIT: Warning: Failed propType: Required prop children was not specified in Row. Check the render method of UniversalSearch., ,

<Row>
  {match}                
</Row>

{match} .

Answer 2

.map() ing .filter() ing. , .