Добавить пробел после первой четыре буквы

Подскажите, пожалуйста как добавить пробел после первой четыре буквы или числа.

Паттерн таков #### ######

4 символа потом 6 символа (могут быть как числа так и буквы)

function App() {
  const [val, setVal] = useState();

  function test(data) {
    return data.substr(0, 4) + " " + data.substr(4);
  }

  return (
    <div className="App">
      <input value={test(val || "")} onChange={(e) => setVal(e.target.value)} />
    </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>

<div id="root"></div>

Нашел этот код

var data = "347405405655278";
data = data.substr(0, 4) + " " + data.substr(4, 6) + " " + data.substr(10);
console.log(data);

Вот тут

Изменил его под себя но что-то не работает.

function test(data) {
   return data.substr(0, 4) + " " + data.substr(4);
}

Ответы (1 шт):

Автор решения: Konstantin Modin

Можно сделать например так:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [val, setVal] = useState("");

  function inputHandler(e) {
    const text = e.target.value;
    setVal(text.replace(/ */g, ""));
  }

  const getVal = text => {
    return text.length > 4 ? `${text.slice(0, 4)} ${text.slice(4)}` : text 
  }

  return (
    <div className="App">
      <input
        value={getVal(val)}
        onChange={inputHandler}
      />
  
    </div>
  );
}
→ Ссылка