3

I am new to React and coding in general, and I am trying to build this simple flashcard app to get a better understanding of react. I know this code is very bad and it should probably be broken into more components, but I can't figure out how to add an event handler to the submit button that will create a flashcard that will have the definition on one side and the term on the other and will make it so when the card is clicked it will change from definition to term. Any feedback is appreciated and I apologize in advance if this question is dumb.

class flashcard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      definition: "",
      term: "",
    };
  }
  createCard = () => {
    this.setState({
      definition: "test",
    });
  };

  render() {
    return (
      <div>
        <Navbar bg="primary" variant="dark">
          <Navbar.Brand>Flashcard</Navbar.Brand>
          <Nav className="mr-auto">
            <Button style={this.buttonstyles} variant="outline-light">
              Add Card
            </Button>
          </Nav>
        </Navbar>
        <Card style={this.styles}>
          <Card.Img variant="top" />
          <Card.Body>
            <Form>
              <Form.Group controlId="formBasicEmail">
                <Form.Label>definition</Form.Label>
                <Form.Control type="definition" placeholder="definition" />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label>term</Form.Label>
                <Form.Control type="term" placeholder="term" />
              </Form.Group>
              <Button variant="primary" type="submit" onClick={this.createCard}>
                Submit
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <Button style={this.previoussytle} variant="primary">
          Previous
        </Button>
        <Button style={this.nextsytle} className="m-2" variant="primary">
          Next
        </Button>
      </div>
    );
  }
3
  • 3
    If button type is "submit" then it will submit the form upon click (and likely you're seeing the page reload). The button's onClick handler looks like it should be updating state though. Are these just two text input boxes and are you trying to save the inputted definition and term into state?
    – Drew Reese
    Jun 4, 2020 at 23:32
  • 2
    Yeah you are missing some essential parts. Like Drew mentioned the submit button type comes with some default behaviour. I recommend you to start with a simple counter app example. But I created you a little demo of your code to push you in the right direction: codesandbox.io/s/wandering-wave-042k8?file=/src/App.js
    – oliverwebr
    Jun 4, 2020 at 23:49
  • Ok, I used the the form bootstrap component so that's why the button was submit which I did not know about the default behavior that came with it.
    – maximus
    Jun 6, 2020 at 2:33

2 Answers 2

2

You can build this in many ways, with or without a form. I chose to use a form and controlled components to handle <input> elements.

With this layout, we would need to keep track of three items for each card:

  • term (string)
  • definition (string)
  • flipped (boolean)

All three items would be inside a card object that would look something like this:

{
  term: 'vcs',
  definition: 'version control system',
  flipped: false
}

We also need an empty array to store all the cards. So the initial state of the app will look like this:

state = {
  term: "",
  definition: "",
  cards: []
};

The term and definition are updated using handleChange event handler.

When the term and definition is submitted (via handleSubmit), the card will be added to the cards array.

The event handler handleClick will handle the toggling of the flipped property of each card.

We can then use conditional rendering to display the term or definition for each card.

{c.flipped ? c.definition : c.term}

Working example:

class App extends React.Component {
  state = {
    term: "",
    definition: "",
    cards: []
  };
  
  // Set state for input elements using "Computed property names"
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  // Toggle each card
  handleClick = index => {
    const updatedCards = this.state.cards;
    updatedCards[index].flipped = !updatedCards[index].flipped;
    this.setState({
      cards: updatedCards
    });
  };
  
  // Add a card to the array, then clear input elements
  handleSubmit = e => {
    e.preventDefault();
    this.setState(state => {
      return {
        cards: [
          ...state.cards,
          { term: state.term, definition: state.definition, flipped: false }
        ],
        term: '',
        definition: ''
      };
    });
  };

  render() {
    return (
      <React.Fragment>
        <form className="card-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="term"
            onChange={this.handleChange}
            placeholder="term"
            value={this.state.term}
          />

          <input
            type="text"
            name="definition"
            onChange={this.handleChange}
            placeholder="definition"
            value={this.state.definition}
          />
          <button>Add</button>
        </form>
        <div className="card-grid">
          {this.state.cards.map((c, i) => (
            <div
              key={c.term + i}
              className="card"
              onClick={() => this.handleClick(i)}
            >
              {c.flipped ? c.definition : c.term}
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
body {
  font-family: Arial, Helvetica, sans-serif;
}

.card-grid {
  padding: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 2px solid gray;
  border-radius: 4px;
  padding: 10px;
  width: 80px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Note: To keep the example simple I did not include React Bootstrap, but you shouldn't have too much problems implementing it in your final project.

2
  • Ok I implemented this code, however for the final project I am trying to create an array or cards that you can iterate through with a previous and next button. Just to clarify there would only be one card on the screen at a time and a previous and next button to iterate through the cards. I'm a little bit confused on how to store the array of cards in the state.
    – maximus
    Jun 16, 2020 at 22:46
  • Just like I mentioned before you could go about this in many ways. For example, given that the state is defined in the main <App> component you could add two more handlers (next, and previous) as well as an index to the state. Then pass the cards array, index and event handlers as props to a functional Card component. See example here.
    – Juan Marco
    Jun 17, 2020 at 16:16
2

As the commentators mention, you do not need a Form in this case. You simply need to update the array in state form the current values of the inputs. Mixing submit and an onClick() handler is rarely a good idea.

@qudrat gave you a nice starting point in his codesandbox. It's more idiomatic to React and a good model.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.