React Js Conditionally Applying Class Attributes

React Js conditionally applying class attributes

The curly braces are inside the string, so it is being evaluated as string. They need to be outside, so this should work:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

Note the space after "pull-right". You don't want to accidentally provide the class "pull-rightshow" instead of "pull-right show". Also the parentheses needs to be there.

How to use conditional rendering using class name in React?

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

Conditionally setting className based on a state variable in a React functional component

You can conditionally set a class like this

{question.values.map(answer => {
        return (<button 
                 className={answers.indexOf(answer) === -1 ? 'class1' : 'class2'} 
                 key={answer} 
                 onClick={() => addAnswer(answer)}
               >
                 {answer}
              </button> );
})}

Conditional react attributes

You can do:

<input type='text' {...(condition ? {id: 'test'} : {})} />

How do I conditionally add attributes to React components?

Apparently, for certain attributes, React is intelligent enough to omit the attribute if the value you pass to it is not truthy. For example:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

will result in:

<input type="text" required>

Update: if anyone is curious as to how/why this happens, you can find details in ReactDOM's source code, specifically at lines 30 and 167 of the DOMProperty.js file.

How do I conditionally add attributes to components?

You could use the ternary on the property value you are trying to set/override in the style prop object.

Example:

<div
  style={{
    ...FULL,
    overflow: screenMinimized ? 'auto' : 'hidden',
  }}
>
  ...
</div>

If you want to conditionally set different properties though you'll need to create each as a separate object to be spread into the style prop object:

<div
  style={{
    ...FULL,
    ...(screenMinimized ? { overflow: 'auto' } : { display: 'none' })
  }}
>
  ...
</div>

Conditionally apply className based on a status value in a React

you can use ternary operators, as you can see the below code

<div className={status === "not_running" ? "status-running" : status == "completed" ? "status-success" : "status-failed"}>

How to conditionally set a Style variable in JSX (React)?

Use a template literal in the string for the border property so you can use the conditional operator to alternate between the two possibilities.

Define the border in a separate variable beforehand so that it's not unreadable.

You aren't using the index parameter, so feel free to remove it.

asideData.imageGallery2.map((img) => {
    const border = `5px solid ${
        img.name.includes('Quartz')
        ? 'red'
        : img.name.includes('Flake')
            ? 'blue'
            : 'black' // default color
    }`;
    return (
        <div className="col-md-6 col-lg-4">
            <img src={img.img} alt="" key={img.name} style={{ border }} />
        </div>)
})

React Js Conditionally Applying Class Attributes