Prefer event handler naming conventions in JSX JS-0411
Handler function for onClick prop key must be a camelCase name beginning with 'handle' only
52 return (
53 <ModalDiv className={"modaldiv"} initial={"initial"} animate={"isOpen"} exit={"exit"} variants={entryExitAnimation} id={props.id}>
54 <CloseButtonDiv>
55 <CloseButton onClick={props.close}>56 <CloseButtonIcon className="material-symbols-outlined">close</CloseButtonIcon>
57 </CloseButton>
58 </CloseButtonDiv>Handler function for onClick prop key must be a camelCase name beginning with 'handle' only
20 <p>{props.innerText}</p>
21 <ButtonDiv>
22 <button className={"genericbutton"} onClick={() => dispatch(toggleModal())}>Cancel</button>
23 <button className={"genericbutton"} onClick={props.confirm}>Confirm</button>24 </ButtonDiv>
25 </div>
26 </GenericModal>Prop key for props.handleChange must begin with 'on'
8
9 return (
10 <InputElement type={"text"} name={props.name} value={props.value} heading={props.heading}
11 handleChange={props.handleChange} required={props.required}/>12 )
13}Prop key for props.handleChange must begin with 'on'
21 <label htmlFor={random.toString()}>{props.heading}:</label>
22 <div className={"radiocontainer"} id={random.toString()}>
23 {props.values.map((element) =>
24 <RadioElement name={props.name} value={element} handleChange={props.handleChange} key={element}/>)}25 </div>
26 </InputDiv>
27 )Prop key for props.handleChange must begin with 'on'
7
8 return (
9 <InputElement type={"date"} name={props.name} value={props.value} heading={props.heading}
10 handleChange={props.handleChange} required={props.required}/>11 )
12}
Description
Ensures that any component or prop methods used to handle events are correctly prefixed.
Bad Practice
<MyComponent handleChange={this.handleChange} />
// Example 2
<MyComponent onChange={this.componentChanged} />
Recommended
<MyComponent onChange={this.handleChange} />
// Example 2
<MyComponent onChange={this.props.onFoo} />