Applying Classname/Onclick/Onchange Not Working on Custom React Component

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

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>
)

Is it possible to set a className on custom react components?

You can, but you should propagate the prop to the inner component. If not, it doesn't know about it.

class SimpleComponent extends React.Component
{
    render() { return <p className={this.props.className}>Some text</p> }
}

To make the CSS query you want to accomplish, then you should create the div inside your component.

class SimpleComponent extends React.Component
{
    render() { return <div className={this.props.className}><p>Some text</p></div> }
}

Adding className but css is not affecting in ReactJS Components

first, you don't need the curly braces for className="box-three"
second, what is the variable singleBox that you are returning in render, I can't find its declaration anywhere, maybe you meant to return the singleBoxArray instead

onClick on a tag not working properly if it has some child elements in react

Inside removeHandler let targetName = e.target.parentElement.name;. When you wrap Remove in another tag, the event target is now the i tag, for which name is undefined.

My onchange method is not working in react

You forgot to set state inside your onchange handler.

import React, { Component } from 'react';
import TaskBar from './Task';

class Todo extends Component {
    state = {
        todo: ''
    }

    changeHandler = (event) => {
        console.log(event.target.value);
        this.setState({todo: event.target.value}) //you forgot to do this//
    }

    render() {
        return (
            <React.Fragment>
                <div className="card">
                    <h5 className="card-header">Todo</h5>
                    <div className="card-body">
                        <h5 className="card-title">Task you want to do</h5>
                            <form>
                                <input type="text" className="form-control" value={this.state.todo} name="todo" onChange={(event) => this.changeHandler(event)} />
                            </form>
                    </div>
                    <button className="btn btn-primary">Go somewhere</button>  
               </div>   
            </React.Fragment>

                    )
    }

                }

export default Todo; 

Link to a codesandbox example - https://codesandbox.io/s/jydjj?module=/example.js

Also currently your onchange uses an arrow function which creates a new function on every hit which is considered bad practice so i would suggest you to do this instead.

<input type="text" className="form-control" value={this.state.todo} name="todo" onChange={this.changeHandler} />


My onChange function is not being passed down to child

Because it is undefined! In fact you give

onChange={this.handleTextChange}

to the components as a props, if you want to call it do

props.onChange

and not

props.handleChange

otherwise, change the variable onChange={js} to handleChange={js}

---

Related Topics