Я не знаю, как изменить статус модального
Доброе утро, я участвую в проекте React и JS, и я все еще изучаю React, и некоторые вещи делать трудно, и у меня есть небольшая проблема, с которой я не могу добиться прогресса.
У меня был модаль с одним цветом для всех результатов, но мне сказали, что в зависимости от результата необходимо показать тот или иной цвет. Я так определил это в модальном компоненте:
const headerModal = {
0: "modal-error", //red
1: "modal-ok", //green
};
А в другом компоненте у меня есть то, что должно быть внутри ката, все, что имеет className «statusKata», должно выходить с headerModal = {1} и «Not started» с headerModal = {0}, но я не знаю, как реализовать его, этот код приведен ниже:
import React from 'react';
const DetailUserKata = (props) => {
return (
<>
{!props.statusKata ?
<div>Obteniendo datos...</div> :
props.statusKata.length ?
<div>
<div className = "statusKata"><label>Autor: </label> {props.statusKata[0].author_login_txt}</div>
<div className = "statusKata"><label>Cuenta de GitHub: </label> {props.statusKata[0].autor_github_url}</div>
</div> :
<div>Not started</div>
}
</>
);
}
export default DetailUserKata;
Сначала на странице, где показано модальное окно, у меня он был, как показано ниже, с заголовком = {1} зеленого цвета (modal-ok), но я должен его изменить:
<Modal show = {showKata} handleClose = {hideModalKata} header = {1} title = "Detalles de la kata">
{<DetailUserKata statusKata = {detail} />}
</Modal >
Заранее спасибо! И всегда приветствуются любые отзывы об изменениях или помощи.
Да! В modal-error (0) модальный заголовок будет красным, а в modal-ok (1) - зеленым. В настоящий момент модальное окно имеет зеленый цвет, потому что в третьем блоке кода, который я показываю, он указан таким образом, но я хочу его изменить. Извините за плохой английский, я стараюсь хорошо это объяснить
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Замените green и red желаемыми цветами
import React from 'react';
const DetailUserKata = (props) => {
return (
<div style = {{background-color: props.header === headerModal[1] ? 'green' :
props.header === headerModal[0] ? 'red' :''}
}>
{!props.statusKata ?
<div>Obteniendo datos...</div> :
props.statusKata.length ?
<div>
<div className = "statusKata"><label>Autor: </label> {props.statusKata[0].author_login_txt}</div>
<div className = "statusKata"><label>Cuenta de GitHub: </label> {props.statusKata[0].autor_github_url}</div>
</div> :
<div>Not started</div>
}
<div/>
);
}
export default DetailUserKata;
и переместите опору header в DetailUserKata
<Modal show = {showKata} handleClose = {hideModalKata} title = "Detalles de la kata">
{<DetailUserKata statusKata = {detail} header = {headerModal[1]} />}
</Modal >
Вы хотите отображать модальное окно с разным цветом заголовка в зависимости от статуса, я прав?