Adding a function to a button in Javascript?

Multi tool use
Multi tool use












-1















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;












share|improve this question




















  • 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















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;












share|improve this question




















  • 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








-1








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;












share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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














  • 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












1 Answer
1






active

oldest

votes


















0














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;





share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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;





    share|improve this answer




























      0














      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;





      share|improve this answer


























        0












        0








        0







        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;





        share|improve this answer













        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;






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 28 '18 at 22:18









        Happy MachineHappy Machine

        1




        1






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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
            E1yuzNnkTftCz6V,E t,ftnl,ND8b1H39YkJt,LtjMQb64AJdzd yFYy03yw61,GSP3 v pHgfmDUKFrCLWS8UzJONHwqh0J O

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas