I am searching for the proper syntax for calling function with parameters and use return values of function as a state-parameter for a link.
Here you can see my code:
import React, { useState, useEffect } from 'react';
import { Link } from "gatsby";
import Layout from "../components/Layout";
const TestParam = (props) => {
const data = [ {
"RezeptId": 1,
"RezeptTitel": "Rezept 1: Hamburger"
},
{
"RezeptId": 2,
"RezeptTitel": "Rezept 2: Wraps"
}];
const getRezept = (parameter_1, parameter_2) => {
const abc = [{
"id": 1,
"text": "addition für 1"
},
{
"id": 2,
"text": "addition für 2"
}];
// Do something
// ...
return abc[parameter_1];
}
return (
<Layout>
<h2>Rezepte</h2>
<div>
{ data && data.map(rezept => {
return(
<div key={rezept.RezeptId}>
<Link to={`/ListRezept/${rezept.RezeptId}`} state={{ data: {_function_with_parameter(param1, param2)}}}>
<h1>{rezept.RezeptTitel.substring(0,25)}</h1>
</Link>
</div>
);
})}
</div>
</Layout>
);
}
export default TestParam;
The “function_with_parameter()” value should be my call of function “get Rezepte” and I want to pass two paramters, which are 2 variable values.
Pseudocode of call function with parameter
state={{ data: {getRezept(${rezept.RezeptId}, ${rezept.RezeptTitel})}}}
Unfortunately it does not work 🙁
What is the proper syntax for calling “getRezepte” function with parameters and add the result of called function as a state-parameter in my Link?
For sure, the getRezept-function will have more logic inside later and also the “const data = […]” value will be the result of a data fetch.
