jsx print text conditional for property without value in styled-component - reactjs

Question

I have this component:
<Button type="submit" { invalid ? 'primary': null }>
this component is styled component:
import styled from 'styled-components';
export const Button = styled.button`
font-size: 15px;
padding: 0.25em 1em;
border: solid 1px ${(props) => {
let color;
if (props.primary) {
color = 'red';
} else {
color = '#ffffff';
}
return color;
}};
`;
I get this error:
Syntax error: Unexpected token ^invalid, expected ... (64:54)
I need just to send a property 'primary' if invalid is true, to get this:
<Button type="submit" primary/>
I don't want write:
primary = { invalid }
the component calls this button is:
import React from 'react';
import { Button } from './layouts/cssstyled';
const getConditionalProps = ( props) => {
// fill your `invalid` variable in this function or pass it to it
const myprops = {};
myprops.primary = true ;
myprops.secondary = false;
return myprops;
}
const Form = (props) => {
console.log('form props');
console.log(props);
const { handleSubmit, invalid, pristine, reset, submitting, t } = props;
return (
<form onSubmit={handleSubmit}>
<p>Invalid? {JSON.stringify(invalid)}</p>
<Button type="submit" disabled={submitting} primary={invalid ? "" : null} >
Buton styled component does not work
</Button>
<button primary={invalid ? "" : null}> button native works</button>
<div className="formError">
{pristine}
{invalid && t('form.haserrors')}
</div>
</div>
</form>
);
};
export default reduxForm({
form: 'CustomerForm', // a unique identifier for this form
})(Form);

Answer 1

You can use boolean values, so your conditional will become like this:
<Button type="submit" primary={ !!invalid } >
Or if you don't want your button to have a primary value when false, you can do this:
const button = invalid ? <Button type="submit" primary > : <Button type="submit" >

Answer 2

I suggest using the React-JS Spread Attributes. It is great tool to spread props on a component with conditional behavior:
class MyComponent extends React.Component {
// ...
getConditionalProps() {
const props = {};
// fill your `invalid` variable in this function or pass it to it
if (invalid) {
props.primary = true;
}
return props
}
render() {
return (
<Button type="submit"
{ ...this.getConditionalProps() } />
);
}
}
Another solution is conditional rendering:
class MyComponent extends React.Component {
// ...
render() {
return (invalid ?
<Button type="submit" primary />
:
<Button type="submit" />
);
}
}
Please note that there may be a better solution to your problem: you need to handle the behavior of the Button component from inside the component itself instead of trying to decide from the parent component whether to send a specific prop or not. But the solution above does exactly what you are requiring.