1. Create a new state variable that will hold the updated array.
2. Use the map() function to iterate through the original array and update the values in the corresponding columns.
3. Update the state variable with the new array.

Here's an example of how you can update an array with four columns:

javascriptCopy code
import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([
    [1, "John", "Doe", 30],
    [2, "Jane", "Smith", 25],
    [3, "Bob", "Johnson", 40]
  ]);

  const updateData = (id, column, value) => {
    setData(data.map(row => {
      if (row[0] === id) {
        return [
          row[0],
          column === 1 ? value : row[1],
          column === 2 ? value : row[2],
          column === 3 ? value : row[3]
        ];
      } else {
        return row;
      }
    }));
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr key={row[0]}>
              <td>{row[0]}</td>
              <td>{row[1]}</td>
              <td>{row[2]}</td>
              <td>{row[3]}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={() => updateData(2, 2, "Johnson")}>Update Data</button>
    </div>
  );
}

export default App;

In this example, we have an array of three rows with four columns each. We also have a updateData() function that takes three arguments: id of the row to update, column number to update, and value to update.

When the button is clicked, we call the updateData() function with the values 2 for the id, 2 for the column, and "Johnson" for the value.

The updateData() function then uses the map() function to iterate through the data array and update the corresponding column with the new value. Finally, the state variable data is updated with the new array.

In SharePoint Framework (SPFx), you can create a custom web part with properties that allow users to configure settings, including a datetime picker. To implement a datetime picker as a user web part property, you can follow these steps:

1. Create a new SPFx web part project using the SharePoint Yeoman generator and set up your development environment.

2. Define the necessary properties in the web part manifest file (webpart.manifest.json) to represent the datetime picker value. For example, you can add a property named selectedDateTime of type DateTimePicker to the properties section of the manifest file:

jsonCopy code
"properties": {
  "selectedDateTime": {
    "type": "DateTimePicker",
    "label": "Selected Date and Time"
  }
}

3. In your web part's main TypeScript file (MyWebPart.ts), import the necessary dependencies to use the datetime picker control:

typescriptCopy code
import { PropertyPaneDateTimePicker } from '@microsoft/sp-property-pane';
import { DateTimePicker } from '@pnp/spfx-controls-react/lib/dateTimePicker';

Make sure you have installed the required dependencies using npm or yarn.

4. Register the property pane control for the datetime picker in the getPropertyPaneConfiguration() method of your web part class:

typescriptCopy code
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: "Web Part Properties"
        },
        groups: [
          {
            groupName: "Settings",
            groupFields: [
              PropertyPaneDateTimePicker('selectedDateTime', {
                label: "Select Date and Time",
                showLabels: true,
                disabled: false,
                initialDate: this.properties.selectedDateTime || new Date(),
                formatDate: (date: Date) => {
                  return date.toLocaleString();
                },
                onPropertyChange: this.onPropertyPaneFieldChanged
              })
            ]
          }
        ]
      }
    ]
  };
}

In this example, we're using the PropertyPaneDateTimePicker control from the @microsoft/sp-property-pane package.

5. Render the selected datetime value in your web part's UI by adding a placeholder element or component:

typescriptCopy code
public render(): void {
  const element: React.ReactElement<IMyWebPartProps> = React.createElement(
    MyWebPartComponent,
    {
      selectedDateTime: this.properties.selectedDateTime
    }
  );

  ReactDom.render(element, this.domElement);
}

In the example above, MyWebPartComponent is the component where you want to use the selected datetime value.

6. Build and package your SPFx solution using the necessary commands (gulp bundle, gulp package-solution).

7. Deploy and test your web part on a SharePoint page. You should see the datetime picker property in the web part's configuration pane, allowing users to select a date and time.

By following these steps, you can create a datetime picker as a user web part property in SPFx and utilize the selected value within your custom web part.