How to use conditional rendering using class name in React?


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?

Source: React – Stack Overflow

November 18, 2021
Category : News
Tags: conditional-rendering | conditional-statements | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.