Блог

• Я отфильтровал значения массива с помощью значений пользовательского ввода из выпадающего списка, флажка и текстовых полей
• Я пытаюсь отсортировать отфильтрованные значения массива
• С последующим отображением свойств имени вместе со спортивными играми и оценкой, которые оценивают принадлежность к определенному диапазону
• Я использовал метод array.filter () и условный рендеринг для выполнения
• Я поражен условной операцией фильтрации оценок sport_games, а также отображением отфильтрованных значений отображаемое значение — это название со спортивными играми и прохождение оценки, удовлетворяющее критериям диапазона
• можете ли вы, ребята, помочь мне решить проблему своими предложениями
• Весь код доступен по ссылке stackblitz:https://stackblitz.com/edit/react-geum6v?file=index.js
• предоставляю фрагмент кода ниже:

index.js (html-часть)

     Players Belonging to same zip code:
         <input type="text" name="zip_code" defaultValue={zip1} onChange={this.handleChange_zip}></input> <br />

          Number of male over certain age: <input type="number" name="age_number" defaultValue= {age1} onChange={this.handleChange_age}></input> <br />

          Students not Belonging from a given state: 
          <select value={state1} onChange={this.handleChange_state}>
            <option value="select">Select</option>
            <option value="CA">CA</option>
            <option value="TX">TX</option>
          </select><br/>

          List of Subjects received grades: <input type="checkbox" name="subjects" value={check} onChange={this.handleChange_sub}></input><br/>

Students received a grade within a range: 
          min grade:<select value={min_grade} onChange={this.handleChange_mingrade}>
            <option value="select">Select</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="c">C</option>
          </select>
          max_grade:<select value={max_grade} onChange={this.handleChange_maxgrade}>
            <option value="select">Select</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="c">C</option>
          </select><br/><br />

          <button onClick={this.sportsZipSearch.bind(this)}>Submit</button><br />
          {zipValue amp;amp; <Zip result={result} />}

Players with range of Sport games grades : {result.length amp;amp; result[0].Sports_games.map(g => { var visibility = (check amp;amp; g[Object.keys(g)[0]]) ? 'block' : 'none'; var sorted = {sorted:(visibility amp;amp; g[Object.keys(g)[0]])}; console.log(sorted);return <div style={{display: visibility}}>{Object.keys(g)[0]} {g[Object.keys(g)[0]]}</div> } )} <br/><br/>
  

(Часть JS)

 sportsZipSearch = () => {
const { zip1, dob1, age1, state1, check, count } = this.state;

const newArray = students.filter((el) => { return ((el.zip === zip1) amp;amp; (parseInt(el.Age) <= parseInt(age1[Object.keys(age1)[0]])) amp;amp; (el.sports_state != (state1)) amp;amp; check ) });
const newArray1 = newArray[0].Sports_games.map((el1) => { return Object.keys(el1) });
const sorted = newArray1[Object.keys(newArray1)].sort();
console.log(age1);
console.log(zip1);
console.log("here--", this.state.zip1, this.state.age1);
console.log(newArray);
//console.log(newArray1);
//console.log(sorted);
console.log(newArray.Subjects);
console.log(count);
this.setState({ result: newArray, zipValue: true })
  

}

zip.js

 const Zip = (props) => {
  return(
    props.result.map(
      results => 
      <h1 key={results.player_first_name}>{results.player_first_name}</h1>
      /* This is not a perfect key, but given the values at hand */
      )
  )
}