score:0

replace green and red with your desired colors

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;

and move header prop to detailuserkata

<modal show={showkata} handleclose={hidemodalkata} title="detalles de la kata">
        {<detailuserkata statuskata={detail} header={headermodal[1]}  />}
</modal >

Related Query

More Query from same tag