Statelessness - sgml/signature GitHub Wiki

Stateless animation

Stateless forms

Stateless Components

DOM based stateless toggling

  1. Unique CSS class names can be date based. For example:

    const ID = 'cls' + Date.now().toString();

  2. Query selectors can target the class name for DOM mutation. For example:

    document.querySelector(event.target.className).parentNode.setAttribute('class', 'hidden');

  3. The CSSOM can be updated to customize styling for the unique class name. For example:

    document.stylesheets[0].insertRule(ID + '{color: red}')

References

Examples

Code

/* You can, however, use the ref attribute inside a functional component as long as you refer to a DOM element or a class component:
*/
function CustomTextInput(props) {
// textInput must be declared here so the ref can refer to it
let textInput = React.createRef();

function handleClick() {
  textInput.current.focus();
}

return (
  <div>
    <input type="text" ref={textInput} />

    <input type="button" value="Focus the text input" onClick={handleClick}/>
  </div>
  );
}

Pattern

Use createRef bound to a DOM element with a class attribute which has a string appended to it which is generated via Date.now()

Games

⚠️ **GitHub.com Fallback** ⚠️