App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import CardCase1 from "./CardCase1.js";
import CardCase2 from "./CardCase2.js";
import CardCase3 from "./CardCase3.js";
import CardCase4 from "./CardCase4.js";
import CardCase5 from "./CardCase5.js";
import CardCase6 from "./CardCase6.js";
import BillCard1 from "./BillCard1.js";
import BillCard2 from "./BillCard2.js";
import ServiceCard1 from "./ServiceCard1.js";
import ServiceCard2 from "./ServiceCard2.js";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: null,
      value3: null,
      value2: 0,
      showCard3Content: false
    };
  }
  onCardChange = value2 => {
    this.setState({ value2 });
    console.log(value2);
  };
  handleClick = () => {
    this.setState(prevState => ({
      showCard3Content: !prevState.showCard3Content
    }));
  };
  onSubmitDropDownCard = value1 => {
    this.setState({ value1 });
    console.log(value1);
  };
  onSubmitResultsCard = value3 => {
    if (value3.length) {
      this.setState({ value3 });
      console.log(value3[0].title);
    }
  };
  render() {
    return (
      <div className="App">
        <div className="container_1">
          <p>
            <b>Create case</b>
          </p>
        </div>
        <div className="container_2">
          <CardCase1
            value2={this.state.value2}
            onCardChange={this.onCardChange}
          />
          <CardCase2
            value2={this.state.value2}
            onCardChange={this.onCardChange}
          />
          <CardCase3 value2={this.state.value2} onClick={this.handleClick} />
        </div>
        {this.state.showCard3Content && (
          <div className="ab">
            <div>
              <CardCase4 onSubmitDropDownCard={this.onSubmitDropDownCard} />
            </div>
            <div className="c3">
              <div>
                <CardCase5
                  foo={this.state.value1}
                  onSubmitResultsCard={this.onSubmitResultsCard}
                />
              </div>
              <div>
                <CardCase6 foo1={this.state.value3} foo2={this.state.value1} />
              </div>
            </div>
          </div>
        )}
        {this.state.value2 == 1 && (
          <div className="ab">
            <div>
              <BillCard1 />
            </div>
            <div className="c31">
              <BillCard2
                foo={this.state.value1}
                onSubmitResultsCard={this.onSubmitResultsCard}
              />
            </div>
            <div className="c41">
              <input type="submit" id="cancel" value="Cancel" />
              <input type="submit" value="Submit" />
            </div>
          </div>
        )}
        {this.state.value2 == 2 && (
          <div className="ab">
            <div>
              <ServiceCard1 />
            </div>
            <div className="c31">
              <ServiceCard2
                foo={this.state.value1}
                onSubmitResultsCard={this.onSubmitResultsCard}
              />
            </div>
            <div className="c41">
              <input type="submit" id="cancel" value="Cancel" />
              <input type="submit" value="Submit" />
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default App;

CardCase3.js

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Radio from "@material-ui/core/Radio";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";

const styles = theme => ({
  card: {
    display: "flex",
    width: 300,
    margin: 25
  },
  newcard: {
    display: "flex",
    width: 300,
    margin: 25,
    background: "AliceBlue",
    border: "1px solid DodgerBlue"
  },
  details: {
    display: "flex",
    flexDirection: "coloumn"
  },
  content: {
    flex: ""
  },
  cover: {
    width: 10
  },
  group: {
    position: "absolute",
    paddingLeft: "250px",
    paddingTop: "20px"
  },
  controls: {
    display: "flex",
    alignItems: "center",
    paddingLeft: theme.spacing.unit,
    paddingBottom: theme.spacing.unit
  }
});

class CardCase3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value2,
      color_change: false,
      radio: false
    };
  }

  handleClick = () => {
    this.setState(
      prevState => ({
        color_change: !prevState.color_change,
        radio: !prevState.radio
      }),
      this.props.onClick
    );
  };

  render() {
    const { classes } = this.props;
    const test = this.state.color_change ? classes.newcard : classes.card;
    return (
      <div onClick={this.handleClick}>
        <label for="101">
          <Card className={test}>
            <div className={classes.details}>
              <CardContent className={classes.content}>
                <Typography component="h5" variant="h5">
                  Technical support
                  <input type="radio" checked={this.state.radio} />
                </Typography>
                <Typography component="h15" variant="h15">
                  <p className="c1">
                    Service-related technical issues and third-party
                    appllications.
                  </p>
                </Typography>
                <Typography variant="h15" color="textSecondary">
                  <p className="c1">
                    Unavailable under the basic Support Plan.
                  </p>
                </Typography>
              </CardContent>
            </div>
          </Card>
        </label>
      </div>
    );
  }
}

CardCase3.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(CardCase3);