Adding a function to a button in Javascript?

Multi tool use
I am having an issue in calling a function on button click. The arrayMaker function sorts the results of a search page. I want that function to be triggered in another component.js when a sort button is clicked. I have tried using <input type="button" onClick= myFunction/>
, as well as many variations of the onClick (e.g. onClick= () => myFunction
, onClick=myFunction()
, onClick={this.myFunction()}
, onClick={myFunction}
).
So far I have only succeeded in breaking the app. Any suggestions or links to resources to check out?
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
javascript reactjs jsx
|
show 1 more comment
I am having an issue in calling a function on button click. The arrayMaker function sorts the results of a search page. I want that function to be triggered in another component.js when a sort button is clicked. I have tried using <input type="button" onClick= myFunction/>
, as well as many variations of the onClick (e.g. onClick= () => myFunction
, onClick=myFunction()
, onClick={this.myFunction()}
, onClick={myFunction}
).
So far I have only succeeded in breaking the app. Any suggestions or links to resources to check out?
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
javascript reactjs jsx
1
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
1
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
2
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36
|
show 1 more comment
I am having an issue in calling a function on button click. The arrayMaker function sorts the results of a search page. I want that function to be triggered in another component.js when a sort button is clicked. I have tried using <input type="button" onClick= myFunction/>
, as well as many variations of the onClick (e.g. onClick= () => myFunction
, onClick=myFunction()
, onClick={this.myFunction()}
, onClick={myFunction}
).
So far I have only succeeded in breaking the app. Any suggestions or links to resources to check out?
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
javascript reactjs jsx
I am having an issue in calling a function on button click. The arrayMaker function sorts the results of a search page. I want that function to be triggered in another component.js when a sort button is clicked. I have tried using <input type="button" onClick= myFunction/>
, as well as many variations of the onClick (e.g. onClick= () => myFunction
, onClick=myFunction()
, onClick={this.myFunction()}
, onClick={myFunction}
).
So far I have only succeeded in breaking the app. Any suggestions or links to resources to check out?
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
</div>);
}
}
export default Display;
javascript reactjs jsx
javascript reactjs jsx
edited Dec 28 '18 at 21:29
mplungjan
87.4k21122181
87.4k21122181
asked Dec 28 '18 at 21:25


JacobJacob
31
31
1
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
1
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
2
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36
|
show 1 more comment
1
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
1
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
2
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36
1
1
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
1
1
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
2
2
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36
|
show 1 more comment
1 Answer
1
active
oldest
votes
Very hard when there is no button in your code. This is generally how i would implement a button in react
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
doTheThing = (e) => {
console.log(`we have the event ${e}`)
e.preventDefault()
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
<button
onClick={
(e) => this.doTheThing(e)
}/>
</div>);
}
}
export default Display;
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964438%2fadding-a-function-to-a-button-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Very hard when there is no button in your code. This is generally how i would implement a button in react
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
doTheThing = (e) => {
console.log(`we have the event ${e}`)
e.preventDefault()
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
<button
onClick={
(e) => this.doTheThing(e)
}/>
</div>);
}
}
export default Display;
add a comment |
Very hard when there is no button in your code. This is generally how i would implement a button in react
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
doTheThing = (e) => {
console.log(`we have the event ${e}`)
e.preventDefault()
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
<button
onClick={
(e) => this.doTheThing(e)
}/>
</div>);
}
}
export default Display;
add a comment |
Very hard when there is no button in your code. This is generally how i would implement a button in react
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
doTheThing = (e) => {
console.log(`we have the event ${e}`)
e.preventDefault()
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
<button
onClick={
(e) => this.doTheThing(e)
}/>
</div>);
}
}
export default Display;
Very hard when there is no button in your code. This is generally how i would implement a button in react
import React from 'react';
import axios from 'axios';
import {Grid} from 'semantic-ui-react';
import Search from './Search';
import DisplayRecipe from './Cards';
class Display extends React.Component {
state = {
recipes: ,
ingredientName: '',
fireRedirect: true,
sortedRecipes:
}
doTheThing = (e) => {
console.log(`we have the event ${e}`)
e.preventDefault()
}
arrayMaker = (x) => {
let newArray = ;
for (let i = 0; i < x.length; i++) {
let test = x[i]
test.num_ingredients = test.ingredients.split(',').length;
newArray.push(test)
}
let newTest = newArray.sort((a, b) => (a.num_ingredients - b.num_ingredients))
console.log(newTest)
this.setState({sortedRecipes: newTest})
}
handleSearchChange = e => {
this.setState({ingredientName: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
axios.get(`http://cors-anywhere.herokuapp.com/recipepuppy.com/api/?i=${this.state.ingredientName}`).then((res) => {
console.log(res.data.results);
this.setState({recipes: res.data.results, fireRedirect: false})
// console.log(this.state.recipes[0].ingredients.split(',').length)
let test = this.arrayMaker(this.state.recipes)
// let newTest = test.sort((a, b) => b - a)
console.log(test)
// console.log(this.state.recipes.arrayMaker());
});
};
render() {
return (<div>
{this.state.fireRedirect && <Search handleSearchChange={this.handleSearchChange} ingredientValue={this.state.ingredientName} onSubmit={this.onSubmit}/>}
<Grid className="background" columns='equal' centered="centered">
{
this.state.sortedRecipes.map((recipe, index) => {
return <DisplayRecipe key={index} recipe={recipe}/>
})
}
</Grid>
<button
onClick={
(e) => this.doTheThing(e)
}/>
</div>);
}
}
export default Display;
answered Dec 28 '18 at 22:18


Happy MachineHappy Machine
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964438%2fadding-a-function-to-a-button-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
no4Dr 32AwFVQbA08gS14H4XTJtNVVy 1cVXyShy,9
1
Where is the button?
– AndrewL64
Dec 28 '18 at 21:29
1
@AndrewL Hidden in the unformatted text
– mplungjan
Dec 28 '18 at 21:30
Please post all relevant codes in your question including the button.
– AndrewL64
Dec 28 '18 at 21:31
2
Minimum effort, please
– mplungjan
Dec 28 '18 at 21:31
have you tried onClick={this.myFunction} ?
– D.Khumoyun
Dec 28 '18 at 21:36