Applying className/onClick/onChange not working on Custom React Component

by

The reason is pretty simple, when you onClick like

<Company company={company} key={company.id} onClick={this.editCompany.bind(this)} />

its not an event that is set on the component, rather a prop that is being passed to the Company component and can be accessed like props.company in the Company component,

what you need to do is to specify the onClick event and className in the Company component like

import React, { Component } from 'react';

const Company = ({company, onClick, className}) => (
  <li onClick={onClick} className={className}>
    {company.Nummer} {company.Bezeichnung}
  </li>
)

export default Company

The function passed on as prop to the Company component can be passed on by any name like

<Company company={company} key={company.id} editCompany={this.editCompany.bind(this)} className="Company"/>

and used like

import React, { Component } from 'react';

const Company = ({company, editCompany}) => (
  <li onClick={editCompany}>
    {company.Nummer} {company.Bezeichnung}
  </li>
)

More Related Contents:

  1. How to add function in JSX?
  2. Loop inside React JSX
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Why shouldn’t JSX props use arrow functions or bind?
  5. Render HTML string as real HTML in a React component
  6. React – User-Defined JSX Components Not rendering
  7. How to use componentWillMount() in React Hooks?
  8. ReactJS – .JS vs .JSX
  9. Can I add a key prop to a React fragment?
  10. How to render HTML string as real HTML?
  11. React.js: Identifying different inputs with one onChange handler
  12. ESLint with React gives `no-unused-vars` errors
  13. Is there any other way to implement a “listening” function without an infinite while loop?
  14. Passing props into external stylesheet in React Native?
  15. What do curly braces mean in JSX (React)?
  16. How to Call a Function inside a Render in React/Jsx
  17. How to have nested loops with map in JSX?
  18. Using styled-components with props and TypeScript
  19. The useState set method is not reflecting a change immediately
  20. Simple Component is not rendering: React js
  21. Console.log() after setState() doesn’t return the updated state
  22. What is event pooling in react?
  23. How to add multiple classes to a ReactJS Component?
  24. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  25. Best way to polyfill ES6 features in React app that uses create-react-app
  26. What does “export default” do in JSX?
  27. Axios – DELETE Request With Request Body and Headers?
  28. reactjs and masonry layout – undefined
  29. Deep nested array of objects not rendering
  30. Why would we use useEffect without a dependency array?

Leave a Comment