Declare a ref while avoiding element possibly null lint warning

PHOTO

Tue Sep 08 2020 15:31:13 GMT+0000 (Coordinated Universal Time)

  const ref = useRef() as MutableRefObject<HTMLDivElement>;

COPY

Save snippets that work from anywhere online with our extensions

Comments

More like this

#reac

Declare a ref while avoiding element possibly null lint warning

  const ref = useRef() as MutableRefObject<HTMLDivElement>;

#javascript #reac #jsx

React example - chaging output and inline styling depending on condition

// will need a HTML page with "root"

import React from "react";
import ReactDOM from "react-dom";

const date = new Date();
const currentTime = date.getHours();
const currentMins = date.getMinutes();

let greeting;

const customSyle = {
  color: ""
};

if (currentTime < 12) {
  greeting = "good morning";
  customSyle.color = "red";
} else if (currentTime < 18) {
  greeting = "good evening";
  customSyle.color = "blue";
} else {
  greeting = "good night";
  customSyle.color = "puprle";
}

ReactDOM.render(
  <h1 className="heading" style={customSyle}>
    {currentTime + ":" + currentMins + " " + greeting}
  </h1>,

  document.getElementById("root")
);

#javascript #reac

Going backwards in React-router v6

const navigate = useNavigate()
navigate(-1)

#javascript #reac #jest

simple test example - jest react

test('render h1 element', () => {
  render(<App />);

  screen.debug();

  expect(screen.getByText('Hello World')).toBeInTheDocument();
});

#javascript #reac #jest

How to store fetch response in javascript variable - Stack Overflow

async function fun() {  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());} const data  = await fun();

#javascript #reac #jest

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css"> <body>	<textarea class="codemirror-textarea"></textarea></body> <script> $(document).ready(function(){    var codeText = $(".codemirror-textarea")[0];    var editor = CodeMirror.fromTextArea(codeText, {        lineNumbers : true    });}); </script> <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

Declare a ref while avoiding element possibly null lint warning

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet