GRID material ui

/* eslint new-cap:0 */
export default function renderToJson(element) {
    let res = {};
    if (!element || !element.type) {
        return element;
    }
    const Component = element.type;
    res.name = element.type;
    res.attributes = { ...element.props };
    let children = element.props ? element.props.children : null;
    delete res.attributes.children;
    if (typeof Component !== "string") {
        res.name = Component.name;
        const context = element.context || {};
        if (Component.prototype && typeof Component.prototype.render === "function") { // ReactComponent
            children = new Component(element.props, context).render();
        } else { // function component
            children = Component(element.props, context);
        }
    }
    if (Array.isArray(children)) {
        res.children = children.map(child => renderToJson(child));
        return res;
    }
    res.children = children ? [renderToJson(children)] : [];
    return res;
}

export default App = () => {
  const data = [
    { id: 1, name: "test", address: "address" },
    { id: 2, name: "test2", address: "address2" }
  ];
  const handleInput = (e) => {
    // или так
    console.log(e.target.selectedOptions[0].getAttribute("custome"));
  };
  // или так
  const onSelect = ({
    target: {
      selectedOptions: [option]
    }
  }) => console.log(option.getAttribute("custome"));
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <select onChange={handleInput}>
        {data.map((el) => {
          return (
            <option key={el.id} value={el.name} custome={el.address}>
              {el.name}
            </option>
          );
        })}
      </select>
    </div>
  );
};

// Данные документов
const documents = [
    { id: 'F0100111', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПРО МАЙНОВИЙ СТАН І ДОХОДИ' },
    { id: 'F0100703', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ з податку на прибуток підприємств' },
    { id: 'F0102003', name: 'ЗАЯВА про застосування спрощеної системи оподаткування' },
    { id: 'F0102103', name: 'РОЗРАХУНОК доходу за попередній календарний рік, що передує року переходу на спрощену систему оподаткування' },
    { id: 'F0103306', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПЛАТНИКА ЄДИНОГО ПОДАТКУ ФІЗИЧНОЇ ОСОБИ - ПІДПРИЄМЦЯ' },
    { id: 'F0111611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб,у зв'язку з використанням права на податкову знижку" },
    { id: 'F0121211', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору" },
    { id: 'F0121411', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору з доходів отриманих самозайнятою особою" },
    { id: 'F0121611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб, у зв'язку з використанням права на податкову знижку" },
];
 
// Создаёт выделение текста
const MarkUp = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>)
 
// Рендерит список документов
const DocsList = () => {
    const [searchDocName, setSearchDocName] = React.useState('');
    
    // получает пользовательский ввод
    const handleChange = event => {
        setSearchDocName(event.target.value);
    };
 
    // отменяет перезагрузку страницы при подтверждении формы
    const handleSubmit = event => {
        event.preventDefault()
    };
 
    // выполняет поиск и подсвечивает совпадающие символы
    const searchResults = !searchDocName
        ? documents
        : documents.filter(doc =>
            doc.name.trim().toLowerCase().includes(searchDocName.trim().toLowerCase())
        )
        .map(doc => {
            // находит подстроку в поисковом запросе и выделяет её
            let markedDocName = doc.name.replace(
                new RegExp(searchDocName, 'gi'),
                match => `<mark style='background: #2769AA; color: white;'>${match}</mark>`
            );
                return {
                    ...doc,
                    id: doc.id,
                    name: markedDocName,
                }
            });
 
    return (
          <RadioGroup name='value' value={active ? active : ''} onChange={handleSelection}>
              {searchResults.map(doc => (
              <FormControlLabel className={classes.item}
                                  style={{margin: 0}}
                                  label={
                                      <Box className={classes.label}>
                                          <Box className={classes.documentId}>
                                              <span>{doc.id}</span>
                                          </Box>
                                          // подсветка результата поиска
                                          <span className={classes.documentName}>
                                              <MarkUp HTML={doc.name}/>
                                          </span>
                                      </Box>
                                  }
                                  key={doc.id}
                                  value={doc.id}
                                  control={<Radio style={{marginTop: -2}} color='primary'/>}/>
              ))}
          </RadioGroup>
        </Paper>
    );
};
 
 
export default DocsList;

// setter
localStorage.setItem('myData', data);
 
// getter
localStorage.getItem('myData');
 
// remove
localStorage.removeItem('myData');
 
// remove all
localStorage.clear();

import React, { Component, useRef } from "react";

import PropTypes from "prop-types";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.myref = React.createRef();
    this.myrefSecondInstance = React.createRef();
    this.childref = React.createRef();

    this.state = {
      defaultOrNew: "default",
      firstNameDefault: "Arhan",
      lastNameDefault: "Kamra",
      firstName: this.myref.value,
    };
  }

  static propTypes = {
    prop: PropTypes,
  };

  componentDidMount() {
    this.myref.current.focus();
    this.childref.current.me();
  }

  handleClick = () => {
    this.myref.current.focus();
  };

  handleClickSecondInstance = () => {
    this.myrefSecondInstance.current.focus();
  };

  handleClickBlur = () => {
    this.myref.current.blur();
  };

  handleClickBlurSecondInstance = () => {
    this.myrefSecondInstance.current.blur();
  };

  changeName = () => {
    this.setState(() => {
      return {
        defaultOrNew: "new",
        firstNameDefault: this.myref.current.value,
        lastNameDefault: this.myrefSecondInstance.current.value,
        firstName: this.myref.current.value,
        lastName: this.myrefSecondInstance.current.value,
      };
    });
  };

  render() {
    return (
      <div className="app">
        <input
          type="text"
          onChange={this.changeName}
          defaultValue={this.state.firstNameDefault}
          ref={this.myref}
        />
        <input
          type="text"
          onChange={this.changeName}
          defaultValue={this.state.lastNameDefault}
          ref={this.myrefSecondInstance}
        />
        <button onClick={this.handleClick}>Focus input</button>
        <button onClick={this.handleClickBlur}>Remove focus</button>
        <button onClick={this.handleClickSecondInstance}>Focus inputSecondInstance</button>
        <button onClick={this.handleClickBlurSecondInstance}>RemoveSecondInstance focus</button>
        <p>
          Hi my <strong>{this.state.defaultOrNew}</strong> name is {this.state.firstNameDefault}{" "}
          {this.state.middleNameDefault} {this.state.lastNameDefault}
        </p>
        <Child ref={this.childref} />
      </div>
    );
  }
}

class Child extends Component {
  me = () => {
    console.log("sophisticated coder");
    window.alert("xyz abc");
  };

  render() {
    return <div>{4 + 4}</div>;
  }
}

key={`${button.text}-${button.bootstrapWidth}-${i}`}

npm i typescript @types/node @types/react --save-dev

// SHA

function sha256(plain: any) {
  // returns promise ArrayBuffer
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  return window.crypto.subtle.digest('SHA-256', data);
}

function base64urlencode(a: any) {
  // Convert the ArrayBuffer to string using Uint8 array.
  // btoa takes chars from 0-255 and base64 encodes.
  // Then convert the base64 encoded to base64url encoded.
  // (replace + with -, replace / with _, trim trailing =)
  // @ts-ignore
  return btoa(String.fromCharCode.apply(null, new Uint8Array(a)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

export async function pkceChallengeFromVerifier(v: any) {
  const hashed = await sha256(v);
  return base64urlencode(hashed);
}

import React,{ Component } from 'react'
  
class Form extends Component{ 
  constructor(props){ 
    super(props) 
    this.state = { email:'',name:'', age:null, address:'',phoneNo:''} 
    this.handleChange = this.handleChange.bind(this) 
    this.handleSubmit = this.handleSubmit.bind(this) 
  } 
  
  // Form submitting logic, prevent default page refresh  
  handleSubmit(event){ 
    const { email, name, age, address, phoneNo } = this.state 
    event.preventDefault() 
    alert(` 
      ____Your Details____\n 
      Email : ${email} 
      Name : ${name} 
      Age : ${age} 
      Address : ${address} 
      Phone No : ${phoneNo} 
    `) 
  } 
  
  // Method causes to store all the values of the  
  // input field in react state single method handle  
  // input changes of all the input field using ES6  
  // javascript feature computed property names 
  handleChange(event){ 
    this.setState({ 
      // Computed property names 
      // keys of the objects are computed dynamically 
      [event.target.name] : event.target.value 
    }) 
  } 
  
  // Return a controlled form i.e. values of the  
  // input field not stored in DOM values are exist  
  // in react component itself as state 
  render(){ 
    return( 
      <form onSubmit={this.handleSubmit}> 
        <div> 
          <label htmlFor='email'>Email</label> 
          <input  
            name='email'
            placeholder='Email' 
            value = {this.state.email} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='name'>Name</label> 
          <input 
            name='name' 
            placeholder='Name'
            value={this.state.name} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='age'>Age</label> 
          <input 
            name='age' 
            placeholder='Age'
            value={this.state.age} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='address'>Address</label> 
          <input 
            name='address' 
            placeholder='Address'
            value={this.state.address} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='phoneNo'>Phone Number</label> 
          <input 
            name='phoneNo' 
            placeholder='Phone No'
            value={this.state.phoneNo} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <button>Create Account</button> 
        </div> 
      </form> 
    ) 
  } 
} 
  
export default Form

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

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Just a general website reference
https://www.valentinog.com/blog/socket-react/

// sending to sender-client only
socket.emit('message', "this is a test");

// sending to all clients, include sender
io.emit('message', "this is a test");

// sending to all clients except sender
socket.broadcast.emit('message', "this is a test");

// sending to all clients in 'game' room(channel) except sender
socket.broadcast.to('game').emit('message', 'nice game');

// sending to all clients in 'game' room(channel), include sender
io.in('game').emit('message', 'cool game');

// sending to sender client, only if they are in 'game' room(channel)
socket.to('game').emit('message', 'enjoy the game');

// sending to all clients in namespace 'myNamespace', include sender
io.of('myNamespace').emit('message', 'gg');

// sending to individual socketid
socket.broadcast.to(socketid).emit('message', 'for your eyes only');

// list socketid
for (var socketid in io.sockets.sockets) {}
 OR
Object.keys(io.sockets.sockets).forEach((socketid) => {});