Реакция: могу ли я использовать реквизит с именем «index»

Из блоков кода ниже видно, что внутри Описание.js мне пришлось передать реквизит с именем "индекс", потому что handleChangeEvent — это функция, которую нужно вызывать с двумя параметрами handleChangeEvent(newValue,index).

Функция handleChangeEvent обновляет состояние, которое в данном случае представляет собой массив длины 3 (по одному значению для каждого входа).

И поскольку index создается компонентом Описание.js, мне пришлось передать это как реквизит.

Он работает по назначению.

ВОПРОС

Это плохая практика? Является ли index зарезервированным словом (React, Javascript или HTML)?

Есть ли лучший подход к этому?

App.js

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Description from "./Description";

function App() {
  console.info("Rendering App...");
  const [inputValues, setInputValues] = useState(["", "", ""]);

  const handleChangeEvent = useCallback((newValue, index) => {
    setInputValues(prevState => {
      const aux = Array.from(prevState);
      aux[index] = newValue;
      return aux;
    });
  }, []);

  return <Description values = {inputValues} handleChangeEvent = {handleChangeEvent} />;
}

Описание.js

import React from "react";
import TextInput from "./TextInput";

function Description(props) {
  console.info("Rendering Description...");
  const inputItems = props.values.map((item, index) => (
    <div key = {index}>
      <div>Input {index + 1}</div>
      <TextInput value = {item} handleChangeEvent = {props.handleChangeEvent} index = {index} />
    </div>
  ));

  return <React.Fragment>{inputItems}</React.Fragment>;
}

TextInput.js

import React from "react";

const TextInput = React.memo(function TextInput(props) {
  console.info("Rendering TextInput..." + props.index);
  return (
    <input
      type = "text"
      value = {props.value}
      onChange = {event => props.handleChangeEvent(event.target.value, props.index)}
    />
  );
});