I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the component which triggers the event to use it's properties
I need to postpone the rendering of item.component until the nonSyntheticEvent occurs
const items = [
{
name: "click me",
component: function First() {
return <strong>asd</strong>;
}
},
{
name: "click me 2",
component: function Second() {
return <b>oasd</b>;
}
}
];
class Component extends React.Component {
componentDidMount() {
this.el.addEventListener("nonSyntheticEvent", event =>
this.nonSyntheticEventHandler(event)
);
}
nonSyntheticEventHandler(event) {
// how to get reference to item
// from event.target to render it's item.component
const el = React.createElement(item.component);
ReactDOM.render(el, event.target);
}
render() {
return (
<div ref={ref => { this.el = ref; }}>
{this.props.items.map(item => <Child {...item} />)}
</div>
);
}
}
<Component items={items} />
With React 16.3 React.createRef() is introduced which can be used in Component to create reference before the Child component is rendered.
for example in Component.constructor a reference to each child can be created in the state
this.state = {
items: items.map(item => ({
...item,
reference: React.createRef()
}))
};
and then in the Child component can be used from props:
function Child(props){
return (
<div ref={props.reference}>
<span>{props.name}</span>
</div>
);
}
and then in the nonSyntheticEventHandler the item can be obtained like so:
const found = this.state.items.find(item => {
return item.reference.current === event.target;
});
working example in Codesandbox.io
Related
I'm just starting out with React, adapting the tic tac toe tutorial for my case.
I'm trying to click on the grandchild component to change the state of the grandparent component . Code is as follows:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: [
{
id: 1,
show: false
},
{
id: 2,
show: false
}
]
}
}
handleClick(i) {
const fields = this.state.fields.slice();
fields[i].show = true;
this.setState({fields: fields});
}
render() {return <Preview />}
}
const Preview = (props) => {
return (
<div className="preview">
{props.fields.map((field) => (
<Field data={field} key={field.id} onClick={ props.onClick(field.id) }/>
))}
</div>
);
};
const Field = props => {
return (
<div className="field" onClick={ props.onClick } />
);
};
I get a TypeError: Cannot read property 'state' of undefined from this line:
handleClick(i) {
const fields = this.state.fields.slice();
Issues
this of the App class isn't bound to the handleClick function. This is cause of TypeError: Cannot read property 'state' of undefined error.
You are mutating your state object. Slicing the array creates a new array reference, but fields[i].show = true; mutates the object reference in state.
You don't pass fields or onClick props to Preview.
The onClick callback isn't called correctly in Preview.
Solution
Bind this to the handler or convert to arrow function so it is automatically bound.
constructor(props){
...
this.handleClick = this.handleClick.bind(this);
}
or
handleClick = (i) => { ..... };
DON'T MUTATE STATE. Shallow copy state then update properties.
handleClick = (id) => {
this.setState(prevState => ({
fields: prevState.fields.map((field) => {
return field.id === id ? {
...field,
show: true,
} : field;
}),
}));
};
Pass fields and handleClick as onClick to Preview.
render() {
return (
<Preview
fields={this.state.fields}
onClick={this.handleClick}
/>
);
}
Call props.onClick correctly with the id.
{props.fields.map((field) => (
<Field
data={field}
key={field.id}
onClick={() => props.onClick(field.id)}
/>
))}
I've added some explanations, check the comments
// [...]
render() {
// Here you need to pass "fields" and "handleClick" as props:
return <Preview fields={this.state.fields} onClickField={this.handleClick} />
}
}
const Preview = (props) => {
// Here you get the props:
const { fields, onClickField } = props;
// Your onclick was a function call instead of just a function
return (
<div className="preview">
{fields.map((field) => (
<Field
data={field}
key={field.id}
onClick={() => onClickField(field.id) }
/>
))}
</div>
);
};
const Field = props => {
return (
<div className="field" onClick={ props.onClick } />
);
};
I m trying to use React Context API to pass state data from a Parent component to a deep nested Child.
The parent is a class component and the child is a function.
When from the child i update the parent state with a function passed through the Context the parent state is updated successfully but then the local state of the child is reset to the initial value.
Parent:
export class ObjectLinking extends Component {
constructor(props) {
super(props);
this.state = {
setCurrentlyDisplayed: this.setCurrentlyDisplayed,
currentlyDisplayed: []
};
}
[...]
render() {
return (
<ObjectLinkingContext.Provider value={this.state}>
{//Panel body will contain deep nested child that is connected to context}
<PanelBody />
</ObjectLinkingContext.Provider>
);
}
}
Child:
import ObjectLinkingContext from '../../context/ObjectLinkingContext';
const AssetListFilters = ({ assets, filtersModel }) => {
const [searchByNameVal, setSearchByNameVal] = useState([]);
const panelContext = useContext(ObjectLinkingContext);
useEffect(() => {
filterBySearchNameVal();
}, [searchByNameVal]);
const filterBySearchNameVal = () => {
if (searchByNameVal.length) {
const { setCurrentlyDisplayed } = panelContext;
const { value: searchedId } = searchByNameVal[0];
const searchedAsset = assets.filter(asset => asset.assetId === searchedId) || [];
setCurrentlyDisplayed(searchedAsset);
}
};
return (
<Autocomplete
onChange={val => setSearchByNameVal(val)}
/>
);
};
Find here the full Parent.js and VeryDeepChild.js component
I want to create a HOC that have a event trigger when a certain key is pressed. When this key is pressed it should provide an event to the parent component. In this case, the key is "#".
Child HOC
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '#') {
this.setState({ mentionStart: true });
}
};
render() {
const { onMentionStart } = this.state;
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
onMentionStart={onMentionStart}
{...this.props}
/>
);
}
};
};
export default withMention;
Parent component
const UserComment = withMention(TextInput);
<UserComment onMentionStart={(event) => console.log(event)} />
I know the implementation is wrong, because whenever I assign a function to onMentionStart prop of child component in parent, child's function is overridden by parent. In this case, how to create a custom event trigger from child component and pass event into it so that the parent can use it accordingly?
I actually solved it by removing onMentionStart prop from HOC and passed onMentionStart function from parent to child as a callback, handled it in onKeyPress handler function.
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '#') {
this.setState({ mentionStart: true }, () =>
this.props.onMentionStart(this.state.mentionStart),
);
}
};
render() {
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
{...this.props}
/>
);
}
};
};
export default withMention;
I do sorting on reactjs, I can’t understand how to redraw all child components so that only one selected remains active, I can update the current one, but the others do not change. Here is the code for an example. Can anyone help / explain how to do it right?
nodejs, webpack, last reactjs
App.js
import React, { Component } from "react";
import Parent from "./Parent";
class App extends Component {
render() {
return(
<Parent />
)
}
}
export default App;
Parent.js
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
popularity: {"sorting": "desc", "active": true},
rating: {"sorting": "desc", "active": false},
reviews_count: {"sorting": "desc", "active": false},
};
}
updateFilters = () => {
// ??
};
render() {
return (
<div>
<Child type="popularity" sorting={this.state.popularity.sorting} active={this.state.popularity.active} updateFilters={this.updateFilters} />
<Child type="rating" sorting={this.state.rating.sorting} active={this.state.rating.active} updateFilters={this.updateFilters} />
<Child type="reviews_count" sorting={this.state.reviews_count.sorting} active={this.state.reviews_count.active} updateFilters={this.updateFilters} />
</div>
)
}
}
export default Parent;
Child.js
import React, { Component } from "react";
class Child extends Component {
handleClick = () => {
this.props.updateFilters();
};
render() {
let activeStr = "";
if (this.props.active) {
activeStr = "active"
} else {
activeStr = "inactive";
}
return(
<div onClick={() => this.handleClick}>
{this.props.type} {activeStr} {this.props.sorting}
</div>
);
}
}
export default Child;
Assuming you are trying to set the active flag for a clicked Type to true and also set all the other types to false.
<div onClick={() => this.handleClick}> this isn't correct, as you aren't invoking the function. This could be corrected to:
<div onClick={() => this.handleClick()}>
Then you can update handleClick to pass the Type:
handleClick = () => {
this.props.updateFilters(this.props.type);
};
OR
You could ignore that handleClick and call the prop function:
<div onClick={() => this.props.updateFilters(this.props.type)}>
Once you have passed the Type back into the updateFilters, we can simply iterate over the previous State Properties, setting all Types' Active Flag to false. However, if the Key matches the Type which was clicked, we set it to true.
updateFilters = type => {
this.setState(prevState => {
return Object.keys(prevState).reduce(
(result, key) => ({
...result,
[key]: { ...prevState[key], active: key === type }
}),
{}
);
});
};
Your Child component could be heavily refactored into a Pure Functional Component, making it a lot simpler:
const Child = ({ type, active, updateFilters, sorting }) => (
<div onClick={() => updateFilters(type)}>
{type} {active ? "active" : "inactive"} {sorting}
</div>
);
Work solution:
https://codesandbox.io/s/4j83nry569
I have this constructor in my parent component
constructor (props) {
super(props)
this.state = {
owner,
name: '',
projectToAdd: this.props.defaultProject,
}
}
And the property projectToAdd is set to the value passed by props, I need to change this property of the state with the following function located in my child component:
handleProjectSelection = (project) => () => {
this.setState({
projectToAdd: project.get('id')
})
}
This function is called when I click an element of a <li> tag in my child component:
renderDropdown () {
const { projects } = this.props
const projectsList = projects.map((project) => (
<li className='u-cursor--pointer u-padding-tiny u-font-size--12px'
key={project.get('id')}
onClick={this.handleProjectSelection(project)} >
{project.get('name')}
</li>
))
return (
<div>
<ul className='c-folder-dropdown'
name='projectList'
form='start-retro-form'>
{projectsList}
</ul>
</div>
)
}
How can I change the state from the child component to the parent component?
Pass a change handler function prop from your parent to the child.
class Parent{
handleChange = () => {
this.setState({
foo: 'bar'
})
}
render(){
return <Child onChange={this.handleChange} {...this.state}/>
}
}