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](https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator) to display the term or definition for each card.
```
{c.flipped ? c.definition : c.term}
```
Working example:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
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'));
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
**Note**: To keep the example simple I did not include [React Bootstrap](https://react-bootstrap.github.io/), but you shouldn't have too much problems implementing it in your final project.
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<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>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
