React js - How to get Click event values from child component to parent component?
You should have functions on your li
s that pass the value to the click handler, rather than putting invalid properties/attributes on li
s.
See the changes in Games#render
and onGameItemClick
:
const { Component } = React;
class User extends Component {
constructor() { super(); this.onGameItemClick = this.onGameItemClick.bind(this); } onGameItemClick(e, val1, val2) { console.log("val1 =", val1, "val2 =", val2); }
render() { return ( <Games onGameItemClick = {this.onGameItemClick} /> ) }}
class Games extends Component { render() { return ( <ul> <li onClick={e => this.props.onGameItemClick(e, "val1(1)", "val2(1)")}>1</li> <li onClick={e => this.props.onGameItemClick(e, "val1(2)", "val2(2)")}>2</li> <li onClick={e => this.props.onGameItemClick(e, "val1(3)", "val2(3)")}>3</li> </ul> ) }}
ReactDOM.render( <User />, document.getElementById("root"));
<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
React JS pass the data or child component to parent component
You can keep the data in the Parent component and use a function to pass the props from the child to the Parent. This concept is called Lifting State Up where you define the state at the highest common ancestor so all the child components are using the same data which in this case is the selecetd item
function Parent() {
const [selectedItem, setSelectedItem] = useState(null);
const data = []; // Your Data
return (
<>
<h1>Your selected Item = {selectedItem}</h1>
{data.map((item) => {
<Child item={item} setSelectedItem={setSelectedItem} />;
})}
</>
);
}
function Child({ item, setSelectedItem }) {
return <Button onClick={() => setSelectedItem(item.id)}> {item} </Button>;
}
how can i get a value from a child component to parent screen in react native?
ParentScreen.js
There are multiple way to get the value. Most simple way is Just get that value from a function. Just try this code, You will get that count in your parent view once you click that button in you child view.
const ParentScreen = () => {
const [txtFromChild, setTextFromChild] = useState("");
const getCountValue = (yourvalue) => {
console.log(yourvalue);
};
return (
<View>
<Text>{txtFromChild}</Text>
<ChildControl getCountValue={(value) => getCountValue(value)} />
</View>
);
};
export default ParentScreen;
ChildControl.js
const ChildControl = (getCountValue) => {
const [count, setCount] = useState(0);
const onPressButton = async () => {
await setCount(count + 1);
getCountValue(count);
};
return (
<View>
<Button title="Count++" onPress={() => onPressButton()} />
</View>
);
};
export default ChildControl;
React – Passing event from child component to parent
You'd have the form pass a function to the child as a prop, and have the child pass that function on to the button as a prop, like this:
const {useState} = React;
const Example = () => {
const onClick = () => {
console.log("Clicked!");
};
return <Parent onClick={onClick} />;
};
const Parent = ({onClick}) => {
return <button type="button" onClick={onClick}>Click Me</button>;
};
ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
How can I re-render parent component with a child component onClick function
React components re-render when the state is updated. So a solution would be to create a state and pass the setter to the child component and call it with a new value whenever a re-render is required.
you can also use Event bubbling in the parent element to capture the onClick event and update the state without needing to pass a prop to the child. read more about event bubbling here
a better implementation would be using the react's context API so that each child has appropriate access to the matrix data and would be re-rendered when the data changes automatically.
React get data from parent component when child click event hit
You should have all the function's in parent component only and pass them to child component, and just call the function from child component whenever required.
For example, move saveTbBtnClick
function to parent component
saveTbBtnClick =()=>{
var uRl = this.state.api +"Save";
var data = this.state.data;
$.ajax({
type:"POST",
url: uRl,
dataType: 'json',
data: {'':JSON.stringify(data)},
success: function(data){
if(data.success == true){
window.alert("Successfully saved ")
}
else{
alert("Guess what didn't happen with the data")
}
},
error: function(data){alert("Error")}
});
}
Pass this function to child,
<Toolbar
id="TradeToolbar"
dataPassed={this.state.data} //pass the data only when required in child component
VUvisibility={true}
nav={this.state.api} //pass the data only when required in child component
saveTbBtnClick={this.saveTbBtnClick} //pass the function here
/>
And finally you can call that function as,
<button id="saveTbBtn" className="far fa-save" onClick={this.props.saveTbBtnClick} />
Like this you can have all the functions in parent component only and pass them to child and call appropriately.
Related Topics
How to Assign [(Ngmodel)] With an Empty/Null/Undefined Object - Angular 4
Reset Form Input Values in React
React Router Dom Returns a Blank Page When Going to a Particular Route
How to Trigger a Click Event on Disabled Elements
How to Get Line Break Within String Interpolation in Angularjs
React Component Not Re-Rendering When State Changes
How to Remove a Json Inside a Json by a Key Using Jquery
How to Tell Chrome Web Debugger to Show the Current Mouse Position in Page Coordinates
How to Use Nestjs Logging Service
Javascript Regex: Replace Hyphen Between Characters Only (Not Spaces)
How to Make Autoplay of the Swiper Slider Start Only After the Slider Enters Viewport
Access a Variable Outside of .Then Function
How to Highlight Parts of an Imagemap on Mouseover
How to Attach Multiple Images in a Embed
How to Deeply Remove Null Values, Empty Objects and Empty Array from an Object