React Js - How to Get Click Event Values from Child Component to Parent Component

React js - How to get Click event values from child component to parent component?

You should have functions on your lis that pass the value to the click handler, rather than putting invalid properties/attributes on lis.

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



Leave a reply



Submit