my first card's default state is false(reversed) even though I put it at true (default)

Question

When my cards appear, the second card is set at default properly but the first card is set reversed. How do I fix this ? I want my first card to be set at default too. The state of defaultcard1 is set as true but when the components load on my page, it's as if it was set as false. I tried to set it as false to see if it reverse it but it still starts as false.

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './RestaurantMenuSoftDrink.css';

class RestaurantMenuSoftDrink extends Component {
    state = {
        defaultcard1: true
        
    };
    state = {
        defaultcard2: true
    };

    render() {

    return (
<div className="restaurant-menu">

    <div className="menu-container">
    
        {this.state.defaultcard1 ? 
        
            <div className="menu-card-container">
                <div>
                    <button className="menu-card-button-container" onClick={() => {this.setState({ defaultcard1: false });
                    }}>
                    <div className="softdrink1"></div>
                    <h1 className="menu-text">Softdrink 1</h1>
                    </button>
                </div>
            </div> : 
            <div className="menu-card-container">
            <div className="menu-card-button-container">
                <button className="button-text-reverse" onClick={() => {this.setState({ defaultcard1: true });
                }}>
                <h1>
                Softdrink 1
                </h1>
                <h2>
                Item detail
                </h2>
                <h2>
                    Price
                </h2>
                </button>
            </div>
            </div>
        
        }

        {this.state.defaultcard2 ? 
        
        <div className="menu-card-container">
            <div>
                <button className="menu-card-button-container" onClick={() => {this.setState({ defaultcard2: false });
                }}>
                <div className="softdrink2"></div>
                <h1 className="menu-text">Softdrink 2</h1>
                </button>
            </div>
        </div> : 
        <div className="menu-card-container">
        <div className="menu-card-button-container">
            <button className="button-text-reverse" onClick={() => {this.setState({ defaultcard2: true });
            }}>
            <h1>
            Softdrink 2
            </h1>
            <h2>
            Item detail
            </h2>
            <h2>
                Price
            </h2>
            </button>
        </div>
        </div>
    
    }
        
    </div>

    <div className="backtomenubutton-container">
        <Link exact to="/restaurant/menu/drink" className="menu-button-text">
            <button className="backtomenubutton">
                <h1>Back to Drinks</h1>        
            </button>
        </Link>
    </div>

</div>
    );
    }
}

export default RestaurantMenuSoftDrink

Answer 1

Issue

You have, for some reason, declared two state class properties.

state = {
  defaultcard1: true
};
state = {
  defaultcard2: true
};

The second is likely overwriting the first, so, this.state.defaultcard1 is undefined, or otherwise falsey regardless of what you initially set it to.

Solution

Declare all of your state values in a single state object:

state = {
  defaultcard1: true,
  defaultcard2: true
};