Skip to content

Instantly share code, notes, and snippets.

Elliott Greaves greaveselliott

Block or report user

Report or block greaveselliott

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StoreProvider } from "./Store";
ReactDOM.render(
<StoreProvider>
<App />
</StoreProvider>,
View App.jsx
import React, { useRef, useContext } from "react";
import { Store } from "./Store";
import { createNewListItem, deleteListItem } from "./Actions";
import "./app.scss";
export default function App() {
const { state, dispatch } = useContext(Store);
const input = useRef();
View App.jsx
return (
<main>
<h1>To do list</h1>
<form onSubmit={onFormSubmit}>
<input type="text" ref={input} />
<input type="submit"/>
</form>
// ...
)
View App.jsx
import { createNewListItem } from "./Actions";
const { state, dispatch } = useContext(Store);
const input = useRef();
const onFormSubmit = event => {
event.preventDefault();
createNewListItem({
dispatch,
View binding-use-ref.jsx
return (
<main>
<h1>To do list</h1>
<form>
<input type="text" ref={input} />
<input type="submit"/>
</form>
// ...
)
View initialise-ref.js
import React, { useRef, useContext } from "react";
import { Store } from "./Store";
import { createNewListItem, deleteNewListItem } from "./Actions";
import "./app.scss";
export default function App() {
const { state, dispatch } = useContext(Store);
const input = useRef();
View bindingHandlers.jsx
return (<main className="app">
<h1 className="app__title">To do list</h1>
<form className="app__form" onSubmit={onFormSubmit}>
<input type="text" className="app__input" ref={input} />
<input
type="submit"
className="app__input-submit"
value="Add to list"
/>
</form>
View App.jsx
return (
<main className="app">
<h1 className="app__title">To do list</h1>
<form className="app__form">
<input type="text" className="app__input"/>
<input
type="submit"
className="app__input-submit"
value="Add to list"
/>
View App.jsx
const onFormSubmit = event => {
event.preventDefault();
const listItemValue = input.current.value;
if (listItemValue !== "") {
createNewListItem({
dispatch,
payload: { listItemValue }
});
View App.jsx
import React, { useRef, useContext } from "react";
import { Store } from "./Store";
import { createNewListItem, deleteNewListItem } from "./Actions";
import "./app.scss";
export default function App() {
const { state, dispatch } = useContext(Store);
return (
You can’t perform that action at this time.