Блог

Главная - Вопросы по программированию - Как сравнить две таблицы на наличие данных и задать цвет в полученных данных в reactjs

Как сравнить две таблицы на наличие данных и задать цвет в полученных данных в reactjs

#reactjs

#reactjs

Вопрос:

У меня есть две таблицы, в которых одна содержит разные задания ( joblist ), а другая ( savedjobs ), в которой хранится копия этого конкретного задания joblist . Это что-то вроде закладки задания для последующего использования.

Если я отображаю все задания на главном экране, я должен видеть сохраненные задания с выделением, говорящим, что они сохранены.

Я пробовал так:

 {joblists amp;amp;
  joblists.map(joblist => {
    {
      resultJobs amp;amp;
        resultJobs.map(job => {
          if (joblist.id === job.id)
            return (
              <i
                id="heart"
                name={joblist.id}
                className="fas fa-heart float-right pr-4 text-danger"
                onClick={this.saveJob1}
              />
            );
        });
    }
  })
}

Но что, если сохраненных заданий нет? Может кто-нибудь помочь?

Комментарии:

1. Не совсем понятно, чего вы хотите достичь. Вы хотите отобразить все элементы в joblist массиве, но каким-то образом выделить элемент, если элемент также присутствует в savedjobs массиве?

2. Да, я хотел бы <i onClick={this.saveJob} className = "fas fa-heart text-danger "></i> знать, присутствуют ли данные в таблице savedjobs, а если нет <i onClick={this.saveJob} className = "far fa-heart text-primary "></i>

3. Не могу понять, почему вы сопоставляете дважды.. вы можете просто перебрать задания и проверить, есть ли это задание также в вашем сохраненном списке заданий. Если да, примените свой пользовательский стиль

Ответ №1:

Вы могли бы попробовать что-то вроде этого:

Code SandBox

введите описание изображения здесь

 const jobList = ['Job A', 'Job B', 'Job C', 'Job D', 'Job E']
const savedJobs = ['Job C', 'Job D', 'Job E']


function App() {

  const resultJobs = jobList.map((job,index) => 
    <li key={index}>
      {job}
      {savedJobs.includes(job) ? 
        <React.Fragment>
          <span>---</span>
          <FontAwesomeIcon icon={faHeart} style={{color:'red'}}/>
        </React.Fragment>
        : ''}
    </li>
  );


  return (
    <ul>
      {resultJobs}
    </ul>

  );
}
Метки: