Changing CSS styles of Forms in React via onSubmit

Question

I am using react-bootstrap and am trying to get my Form.Control to change its CSS stylings on form submission. When submission occurs I can see in my console the formStyle changing between the two, however it doesn't re-render with these new styles when I believe it would with the state change.

Any explanation would be extremely helpful.

    render() {
        const lockedStyle = {
            backgroundColor: "#26607d",
            color: "#ffffff",
        };

        const unlockedStyle = {
            backgroundColor: "#ffffff",
            color: "#26607d",
        };

        let formStyle = lockedStyle;

        const swap = event => {
            event.preventDefault();
            if (this.state.isLocked) {
                formStyle = unlockedStyle; // Change to Unlocked
                this.setState({ isLocked: false });
                console.log(formStyle);
            } else {
                formStyle = lockedStyle; // Change to Locked
                this.setState({ isLocked: true });
                console.log(formStyle);
            }
        return (
                   <Form onSubmit={swap}>
                       <Form.Control 
                            type="text"
                            placeholder="First Name"
                            style={formStyle}
                       >
                       <Button type="submit">Swap Styles</Button>
                   </Form>
               );
        };

Answer 1

to cause a re-render there should be a state change, but everytime you re-render you set formstyle to be lock-style in let formStyle = lockedStyle;

try moving formStyle to a state variable then applying this.state.formStyle to the style, then you can remove the isLocked and leave only formStyle as state. and just toggle between the states in the swap.

look at the example below.

but for the best practice it is good to leave the render method to render and move all the variables outside, because once you define them you should always remember that render() occurs on every state change(setState).

const unlockedStyle = .....
const lockedStyle = ....

export class ComponenetName extends React.Component {
    constructor(){
         this.state = {
              formStyle:unlockedStyle
         }
         this.swap = this.swap.bind(this) //binding swap to this object for careful state changing , for future state changing from other components.... good practice
    }
.....

swap = event => {
       event.preventDefault()
       this.setState((prevState) => {return {formStyle:(prevState.formStyle==lockedStyle? unlockedStyle : lockedStyle)}})```

 }
 .....
 render() {
     return (
     <Form onSubmit={this.swap}>
           <Form.Control 
                type="text"
                placeholder="First Name"
                style={this.state.formstyle}
            >
            <Button type="submit">Swap Styles</Button>
 </Form>)
 }