How to use conditional rendering using class name in React? [duplicate] - reactjs

Question

This question already has answers here:
React Js conditionally applying class attributes
(24 answers)
Closed 1 year ago.
import { display } from '#mui/system';
import React from 'react';
import "../user_config/user_page.css"
export default function FileUploadButton({showBtn, setShowBtn,value,...rest}) {
const handelClick = () => {
setShowBtn(false);
};
return (
<div style={{ position: 'relative', display: 'inline-block' ,marginTop:'10px'}} className="big-size-file">
<button style={{ padding: '1px 12px', border: ' 1px solid #989797', borderRadius: '4px', color: '#727171',cursor:"pointer !important" }}>
{value && showBtn ? 'Replace file' : 'Choose file'}
</button>
{value && showBtn?<span title={value} style={{fontSize: '9px', color: 'blue', marginLeft:'10px' }}>{value}<button type="button" onClick={handelClick} className="float-right rounded-md text-blue-500 hover:text-gray-500 focus:outline-none " className={"big-size-file"?'marginTop:-17px':'margTop:11px'}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3 z-100"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button></span>:<span>No file chosen</span>}
<input type='file' {...rest} className="fileStyle" style={{ position: 'absolute', zIndex: 2, opacity: 0, height: '100%', top: 0, bottom: 0, left: 0, right: 0 }} />
</div>
)
}
also big-size-file CSS property
.big-size-file {
max-width: 190px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
How can I use that classname in conditional rendering that if classname is "big-size-file" then button marginTop is -17px or else marginTop 11px?

Answer 1

you can use state for storing your inital default value.
make two css classes with different styling
const [sty,setSty]=useState("default css class name here")
if you have some event then change it state set classname of your css.Now for your else part just change the state or make another state for storing name of diffeent css class
{value && showBtn?<span title={value} className={sty}>{value}<button type="button" onClick={handelClick} className="float-right rounded-md text-blue-500 hover:text-gray-500 focus:outline-none " className={"big-size-file"?'marginTop:-17px':'margTop:11px'}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3 w-3 z-100"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button></span>:<span>No file chosen</span>}