score:0
pass a function from a parent component to you child component (the form):
https://codesandbox.io/s/4x3zjwxwkw
const app = () => (
<div>
<createrecipe />
<updaterecipe />
</div>
);
class createrecipe extends react.component {
constructor(props) {
super(props);
this.onsubmit = this.onsubmit.bind(this);
}
onsubmit(e) {
e.preventdefault();
console.log("do post recipe");
}
render() {
return (
<div>
<myform title="post recipe" onsubmit={this.onsubmit} />
</div>
);
}
}
class updaterecipe extends react.component {
constructor(props) {
super(props);
this.onsubmit = this.onsubmit.bind(this);
}
onsubmit(e) {
e.preventdefault();
console.log("do get recipe");
}
render() {
return (
<div>
<myform title="get recipe" onsubmit={this.onsubmit} />
</div>
);
}
}
const myform = ({ title, onsubmit }) => {
return (
<div>
<h2>{title}</h2>
<form onsubmit={onsubmit}>
<input type="text" />
<button type="submit">submit</button>
</form>
</div>
);
};
edit: per the comment, you can absolutely separate the post
and get
submit functions, but this duplicates logic a bit. what could be better is to have the <app />
component own the two submit functions, and pass them respectively to <updaterecipe />
and <postrecipe />
, maybe even the titles too! i'll let you compose this however you'd like, but hopefully this shows you the flexibility of react.
score:0
you can pass in a method as a prop to the component - that way you can define the functionality outside of the component and let it execute it within the components scope.
an example of this would be passing in a onpress event to a button, or an onclick event to any other component.
score:0
you can pass the method into the component as a prop
and then reference props in your submit function like this:
submit = () => {
var data = {
method: this.props.method,
...
};
fetch('/url/', data);
}
Source: stackoverflow.com
Related Query
- Reuse a react component with different method calls
- Is there a different method to setState with e.target.value in functional component react using hooks?
- how do i reuse a react component but with different colours?
- Stubbing a React component method with Sinon
- Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value
- React TypeScript component with two different prop interfaces
- How to mock API calls made within a React component being tested with Jest
- How to mock a React component lifecycle method with Jest and Enzyme?
- Reusing multiple instances of react component with different props
- Unit test method that calls clearInterval with Jest and Enzyme on React
- React map always calls method with data of last element
- Rendering a component multiple times with different props in React
- Using the same component for different Routes with React Router
- Can't perform a React state update on an unmounted component with fetch POST method
- Reuse everything from a React component except its render method
- React Router trigger re-load / re-mount component on redirecting to same page with different slug
- Same route path with different component in React
- React Routing to Same Component with Different URL
- What is this syntax of defining a method in a React component with ES6
- Same component with different parameters is not updating in react
- React Router with different paths on same component: does not re-initialize component (useEffect [] not called)
- How to reuse React component that has different markup?
- React Component calling method to a different component
- How to mock a React Component static method with Jest
- Problem rendering Component in a different page with React Router
- How to test react component with mock api calls
- How to unit test the output of a React component method in a React Router / Redux app with Enzyme
- How to describe the method in a React component with interface of TypeScript?
- react component method binding with arrow function (class properties)
- Import default react component with two or more different name
More Query from same tag
- React: can't change input with onChange
- Why doesn't a useEffect hook trigger with an object in the dependency array?
- Why Can't I style this react component
- Array for map function in react
- Antd RangePicker cannot set 12 hour format for Time
- Getting React component instance from ReactDOM.render() return
- React, data display with GitHub api
- Taiwlwindcss: map through data elements with grid returns data in a single column
- how to use javascript filter using an id from html element from another component
- Can't pass data from action to reducer
- React+JavaScript: Item appears on console but then disappears
- Missing file extension "tsx" for "./reducer" error after using eslint-config-airbnb
- Connect to Azure Blob Storage REST API with axios, Node.js
- How do you dynamically render a component based on incoming props, in React?
- Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined
- React Jest Snapshot testing with dynamic Id
- Using React Higher Order Component - Specifcally react-sortable-hoc
- React how can i use @import
- How to hide a button unless a variable has a value
- How to position antd notification - i want it to be centered
- How do you switch between pages with React-router-dom?
- Can't fetch firebase collection with React
- React + TypeScript: Defining EventHandler
- Not getting data from the firestore
- I am trying to do this question but, state is giving me problems
- Attach input type="file" with button in react
- get the value of text area by GetElementByName
- Why type is being set to unknown on optional field in particular setup with generics?
- How do I update state with a button click when initial state is set in an useEffect hook api call?
- useEffect not rendering before getting to return