hi i have an object like :

export const Data = [
  {
    FileID: 1,
    Name: 'david',
    Date: '10/02/2022',
    hour: '21:00',
    Actions: true,
  },
{
    FileID: 2,
    Name: 'Ben',
    Date: '10/04/2022',
    hour: '22:00',
    Actions: true,
  },
{
    FileID: 3,
    Name: 'Alex',
    Date: '22/06/2022',
    hour: '21:00',
    Actions: true,
  },
]

and i want change value of Actions to false by onClick Button :

 <button disabled={!Data[0].Actions} onClick={() =>
    
    Data[0].Actions=false
    
     } className="bg-red-600 mt-2 p-3 rounded-2xl text-sm text-white">
      Click
    </button>

If I run the above code, it gives me this error:

Cannot assign to read only property 'Actions' of object '#<Object>'

i dont want to creat new object ,i want Update my the Objects properties value and want after the change Action value For First Object have this :

export const Data = [
  {
    FileID: 1,
    Name: 'david',
    Date: '10/02/2022',
    hour: '21:00',
    Actions: false,
  },
{
    FileID: 2,
    Name: 'Ben',
    Date: '10/04/2022',
    hour: '22:00',
    Actions: true,
  },
{
    FileID: 3,
    Name: 'Alex',
    Date: '22/06/2022',
    hour: '21:00',
    Actions: true,
  },
]

CodePudding user response：

You can do it like this:

Data[0] = {...Data[0], Actions: false}

CodePudding user response：

If you want your buttons to reflect any updates you make to them those buttons need to be held in state. When the state changes the new data is reflected in the JSX.

Here I'm passing in the button config as a prop to the component and immediately adding it to state (note: I've changed actions to disabled, and set them all to false as it makes more sense to me).

When the button is clicked it passes the fileId to a function which

1. Makes a copy of the current state
2. Finds the index of the button in the state copy that matches the id you passed into the function
3. If that button exists update its disabled value
4. Update the state with the updated state copy.

const { useState } = React;

function Example({ buttonConfig }) {

  const [ buttons, setButtons ] = useState(buttonConfig);

  // When a button is clicked pass in the fileId
  function handleClick(fileId) {
  
    // Make a copy of the buttons state
    const copy = [...buttons];
    
    // Find the index of the button with that fileId
    const index = copy.findIndex(button => {
      return button.fileId === fileId;
    });

    // If that button exists disable it, and then
    // update the buttons state
    if (index >= 0) {
      copy[index].disabled = true;
      setButtons(copy);
    }
  
  }

  return (
    <div>
      {buttons.map(button => {
        return (
          <button
            data-id={button.fileId}
            disabled={button.disabled}
            onClick={() => handleClick(button.fileId)}
          >{button.name}
          </button>
        );
      })}
    </div>
  );

}

const buttonConfig=[{fileId:1,name:"David",date:"10/02/2022",hour:"21:00",disabled:false},{fileId:2,name:"Ben",date:"10/04/2022",hour:"22:00",disabled:false},{fileId:3,name:"Alex",date:"22/06/2022",hour:"21:00",disabled:false}];

ReactDOM.render(
  <Example buttonConfig={buttonConfig} />,
  document.getElementById('react')
);

button { border-radius: 5px; padding: 0.25em 0.4em; font-size: 1.2em; margin-right: 1em; }
button:not(:disabled):hover { cursor: pointer; background-color: lightblue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>