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

Question

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?

big-size-file classname use for if i am upload biger name file(i.e aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.apk) then it should be ellipsis using three dot (i.e aaaaaaaa...) — Sougata Mukherjee
– Sougata Mukherjee, Commented Nov 18, 2021 at 4:59
if i want to upload small file (i.e file1.apk) then the button position is not aligned so manually i have to change the margin-top:17px; also if i upload bigger file like(aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.apk)then button position position i have to fixed 11px ,so i just want a condition that if user upload small file then button is aligned as well as if upload bigger file then also aligned so manually two file are aligned parallelly — Sougata Mukherjee
– Sougata Mukherjee, Commented Nov 18, 2021 at 5:14
so i want that if classname is "big-size-file" then margintop -17px else margintop 11px like <span className={"big-size-file"?'marginTop:-17px':'margTop:11px'}> — Sougata Mukherjee
– Sougata Mukherjee, Commented Nov 18, 2021 at 5:20
"big-size-file "comes form external CSS file user_page.css that already import in my file — Sougata Mukherjee
– Sougata Mukherjee, Commented Nov 18, 2021 at 5:24
I guess just apply the 'marginTop: -17px' style because the string literal "big-size-file" is a truthy defined value, so using a ternary would be pointless. Otherwise, it is unclear what you are asking for and what you're expecting. — Drew Reese
– Drew Reese, Commented Nov 18, 2021 at 5:34

salik saleem · Accepted Answer · 2021-11-18 04:57:43Z

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>}

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related