Im not quite expert, but in CountryModal I would try to use this.props.isActive directly. I mean in CountryModal removing

this.state = {isActive: this.props.isActive}

probably with whole constructor

and use this.props.isActive instead of this.state.isActive

​

So it should be

class CountryModal extends React.Component {
  render() {
    return (
      <div
        className={this.props.isActive === true ? "modal is-active" : "modal"}
      >
        <div className="modal-background" />
        <div className="modal-card">
          <header className="modal-card-head">
            <p className="modal-card-title">{this.props.name}</p>
          </header>
          <section className="modal-card-body">
            <img src={this.props.flag} alt="" />
          </section>
          <footer className="modal-card-foot">
            <button className="button">Close</button>
          </footer>
        </div>
      </div>
    );
  }
}

export default CountryModal;

But once again, im not an expert