My SCSS file includes the following classes:
.errorNotice {
display: none;
font-size: 12px;
color: #D85B5F;
background: white;
padding: 5px;
.error & {
display: inline-block;
}
}
Within my render function,
{this.state && this.state.error ?
(
<p className={styles.errorNotice + (this.state.error ? styles.error : '')}>{this.state.error}</p>
) :
null
}
However, the output does not meet my styling requirements. It is displaying a strange concatenation:
campaigns-components-WaitlistForm-styles_errorNotice-1X-Ty4campaigns-components-WaitlistForm-styles_error-JNXx2EI aim to correctly display the errorNotice with the appropriate display attribute.
Thank you