score:0
Accepted answer
add method to your class or pass state to receiptsdata function;
export const recipesdata = (search) =>{
const url = `https://www.food2fork.com/api/search?key=${key}&q=${search}&page=2`;
const recipesdata = fetch(url).then(res => res.json());
return recipesdata;
or
class search extends component {
state = {
search: ""
};
handlechange = e => {
this.setstate({
[e.target.name]: e.target.value
});
};
handlesubmit = (e) => {
e.preventdefault();
const url = `https://www.food2fork.com/api/search?key=${key}&q=${this.state.search}&page=2`;
fetch(url)
.then(res => res.json())
.then(res => {
console.log(res);
})
}
render() {
return (
<div>
<form onsubmit={this.handlesubmit}>
<input
type="text"
name="search"
value={this.state.search}
onchange={this.handlechange}
/>
<button type="submit">
search
</button>
</form>
</div>
);
}
}
export default search;
score:0
here is a working example using react hook:
const search = () => {
const [value, setvalue] = react.usestate('');
const fetchrecipesdata = url => {
return fetch(url).then(res => res.json());
};
const handlechange = e => {
setvalue(e.target.value);
};
const handlesubmit = e => {
const key = 'your_api_key';
const url = `https://www.food2fork.com/api/search?key=${key}&q=${value}&page=2`;
console.log(fetchrecipesdata(url));
e.preventdefault();
};
return (
<div>
<form onsubmit={handlesubmit}>
<input
type='text'
value={value}
onchange={handlechange}
/>
<button type='submit'>search</button>
</form>
</div>
);
};
reactdom.render(<search />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
Source: stackoverflow.com
Related Query
- How do i pass from a class component to a separate api component the search input
- How to get the DOM node from a Class Component ref with the React.createRef() API
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to take the input from a react component and pass the length of the input to another react component
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How to pass input value from the search bar to another component?
- How to pass the data from class component to functional component and vice verse
- How to pass the match when using render in Route component from react router (v4)
- How to Pass input Field Data from Modal to the Container in react-Native?
- React: How to pass width as a prop from the component
- How to pass input value from child to parent component react
- How do I pass in the variant property of the material-ui TextField from a wrapping React component
- How to pass value from a child functional component to parent class component?
- How to pass data from one component to another while using API in reactjs
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to pass props from functional component to class component
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How to pass data from functional component to class component
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How to pass route parameters from one Component and display in the other
- React Redux how to pass data from input to rest api
- How to pass the variable from one component to another
- how to render the updated values from the input fields in the child component
- How can I pass a JWT from the client side to my API to be properly authenticated?
- How to pass state/data from one component to another in React.js (riot api specifically)
- How to pass data from functional component to class component in reactjs?
- How to pass value from custom component class to redux-form?
- How can I remove the magnifying glass button from an Ant Design input search box?
- How to pass props from one page using a Link(react-router) to a class component
More Query from same tag
- Apply CSS style to individual element
- My React app is not registering setupProxy.js with http-proxy-middleware
- React Hook useEffect has a missing dependency when passing empty array as second argument
- How do I move to a new component after a clock hits zero
- How to wait for multiple graphql mutations to finish then call another function
- React & Mobx: render (via method render()) @observable data that will be modified after the specified component is rendered
- Gatsby - Updating context data on page load
- Changing primary color in material-ui causes material-ui datepicker to crash
- react js : display items using map method
- Convert Material UI app to mobile and make it responsive
- How to import node module or JavaScript file without webpack dependency when using create-react-app?
- Dinamic data from mui-datatable
- Text field validation in material UI using error property
- combine array elements and send response
- Can't use mobs decorator, error:Support for the experimental syntax 'decorators-legacy' isn't currently enabled
- It's impossible to operate with state after installed package react
- REACT-REDUX : Uncaught Error: Actions must be plain objects
- ReactJS performing a shallow copy on an object in one step
- Go Restful API : CORS configuration works with React but not with Angular
- how to do React reset for refresh component
- Cannot render child components with React Router (Nested Routes)
- Multiple keyframes are generated with same name in production build(not using css modules)
- Confused with destructuring assignment within JSX syntax
- How to add exact keyword to only one path in the array of path of Route tag in React-Router
- Array.prototype.filter() expects a value to be returned at the end of arrow function, React
- How to mock Firebase Auth methods? (React, Testing Library)
- How to group an array within React Native
- Loading screen using Semantic UI React
- Configuration store variation with React/redux and thunkMiddleware
- custom MultiValueRemove props does not work in react-select