e.preventDefault() is not a function in Reactjs, bind used

Question

I'm new to react, i want to pass an a value as an argument when the user clicks, and also preventDefault, i found this question that suggest using bind i used it as the code below but didnt solve my problem, it gave me the error TypeError: e.preventDefault is not a function.


  constructor(props){
    super(props)
    this.state={
      headline:'',
      articles:[],
      article:[],
    }
  }


componentDidMount(){
  axios.get("http://127.0.0.1:5000/api/v1/news")
  .then(res=>{this.setState({articles:res.data})}
  )
}




browse = (e,id) => {
  console.log(e)
  e.preventDefault()
  console.log(id)
  axios.get("http://127.0.0.1:5000/api/v1/news/"+id)
  .then(res=>{this.setState({article:res.data,});console.log(res.data)})
}

Here's where i use the browse method

  {this.state.articles.map(art=> {return (
                     <tr>
                    <td><a href={art.url}>{art.headline}</a></td>
                    <td>{art.topic}</td>
                    <td>{art.author}</td>
                    <td><button  onClick ={this.browse.bind(this,art._id.$oid)} > Browse </button></td>
                                            </tr>
                                      )})}

Here's the error

×
TypeError: e.preventDefault is not a function
App.browse
src/App.js:36
  33 |         }
  34 | 
  35 | browse = (e,id) => {
> 36 |   e.preventDefault()
  37 |   axios.get("http://127.0.0.1:5000/api/v1/news/"+id)
  38 |   .then(res=>{this.setState({article:res.data,});console.log(res.data)})
  39 | }
View compiled

Mata · Accepted Answer · 2020-03-07 20:18:49Z

1

Actually, by writing onClick in that way, you are calling the function as the component is rendered and the passed "e" is not the event, so e.preventDefault() is not a function.

For binding onClick without calling it at the runtime and passing "event" you can use the following format as mentioned here:

onClick={(e) => this.browse(e, id)}

answered Mar 7, 2020 at 20:18

Mata

4737 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abdo Over a year ago

with this is not telling preventDefault is not exist, but still reload the page.

Mata Over a year ago

please test putting the line "e.preventDefault()" at first before the "console.log(e)" and let me know about the result

abdo Over a year ago

still reload, here's the code gist.github.com/sadakmed/891ef036e67a290c9fd3fcbb3d588eb1

Mata Over a year ago

why are you calling the "this.componentDidMount();" again? everything seems to be working fine for me

abdo Over a year ago

i just added it, because when it reloads. it gives an error of the this.state.articles that is not there. can i do this other way?

Collectives™ on Stack Overflow

e.preventDefault() is not a function in Reactjs, bind used

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related