-1

React passing parameter with arrow function in child component

By that feedback, I can understand what is going on to update the state.

However, it seems like my code isn't working although code seems exactly same.

  constructor(props) {
    super(props);
    
    // this.state = {
    //   selectedId: 0
    // }
    this.state = {
      selectedId: 0
    }
  }
  
handleClick = (id) => {

  // const { name, value } = event.target;
  console.log(id);
  this.setState = ({
    selectedId: id
  })
}

  render () {
    //const { isEditClicked } = this.state;
    const { selectedId } = this.state;
  return (
    <div className='admin-match-item'>
{selectedId}

          <CustomIconButton type='edit' id={this.props.id} handleClick={this.handleClick} />
    </div>
  );
  }
}

And Child component looks below

//Need refactoring
const CustomIconButton = ({ type, id, handleClick, ...otherProps }) => (
   <div>
      hi{id}
   <button className='button-icon' onClick={() => handleClick(id)}>
      {
         type == 'add' ? <AddIcon className='icon' /> :
         type == 'save' ? <SaveIcon className='icon'/> :
         type == 'edit' ? <EditIcon className='icon' /> :
         type == 'delete' ? <DeleteIcon className='icon' /> : 
         <ErrorIcon className='icon' /> 
      }
   </button></div>
)

export default CustomIconButton;

I am passing props.id to child component and let state to be updated with the id that I am clicking. The thing is inside of console.log is returning the value I want, but it doesn't update selectedId state(always 0) Can anyone help me with this?

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Jake Kwon
  • 267
  • 2
  • 3
  • 13

3 Answers3

2

Change your code to this.setState({selectedId: id})

handleClick = (id) => {
  // const { name, value } = event.target;
  console.log(id);
  this.setState({selectedId: id})
}
akhtarvahid
  • 9,445
  • 2
  • 26
  • 29
-1

You're doing the wrong method of setState. You have to run: 

 `handleClick = (id) => {
    // const { name, value } = event.target;
    console.log(id);
    this.setState({ selectedId: id })
 }`
Programming World
  • 1
  • It's not different because this is the only one way to correct this answer that's why I shared, I am new in StackOverFlow but I am a MERN stack developer and trying to help others – Programming World Jan 03 '20 at 05:01
  • Welcome to SO! It's not really welcomed to duplicate the content of other answers. If you feel that an answer is already good, you should [upvote it (when you'll have 15 reputation points)](https://stackoverflow.com/help/privileges/vote-up). – Emile Bergeron Jan 03 '20 at 05:12
  • Take a look at the [help center](https://stackoverflow.com/help) to find answers to your questions about Stack Overflow. I've linked to the _Vote up_ privilege in my previous comment, which is unlocked at 15 reputation points. In the meantime, you can suggest edits to existing questions and answers, which rewards 2 points when approved. You can also ask questions and answer others questions granted that your answer is relevant and brings something new to the thread, or a better explanation which could be missing from another answer. – Emile Bergeron Jan 03 '20 at 10:31
  • Ok. Thanks. I will take care – Programming World Jan 03 '20 at 11:27
-1

Don't use the equal sign (=) with the setState method. You call the setState method within your component class like so this.setState() then passing in an object with key-value pairs. That is why class component state does not change.

handleClick = (id) => {
    this.setState({
        selectedId: id
    })
}
Dasith Tharaka
  • 36
  • 3