How to combine a link to a button which should change the state dynamically?-CodePudding

I want to input a button to my react page which should download an attachment(specifically a SSRS Report). This link has a variable(order number parameter) which changes with the array.map for each data row. Here's how I tried to do it but the issue I have is in the link I cannot insert the variable. Since it's not letting me use backticks how should I make this work?

My code:

                {data.map((alldata) => (
                    <ul key={alldata.id}> 
                      <li><input id={alldata.id} defaultValue={alldata.supplier_email} onChange={e => setInput1(e.target.value)} size="35"/></li> 
                      <li><input id={alldata.id} defaultValue={alldata.confirmed} onChange={e => setInput2(e.target.value)} size="35"/></li>
                      <Button component={Link} to="http://sqlserver15/ReportServer/Pages/ReportViewer.aspx?%/ESE_PRODUCTION/Event Manager/Purchase_Order&ord_no=${ordernumber}&rs:Command=Render&rs:Format=PDF">
                        Posts
                      </Button>
                      <button id={alldata.ID} onClick={handleUpdate}>Update</button>
                      
                    </ul>
                ))}

So in above code the to="http://sqlserver15/ReportServer/Pages/ReportViewer.aspx?%/ESE_PRODUCTION/Event Manager/Purchase_Order&ord_no=${ordernumber}&rs:Command=Render&rs:Format=PDF" is the place where I need to change dynamically, specifically the ord_no=${ordernumber} part. But I cannot use ${} to dyncamically change it since Material-UI button element won't let use backticks.

CodePudding user response：

In map function you can generate the link and then just add to to prop.

 {data.map((alldata) => {
        const _link = `http://sqlserver15/ReportServer/Pages/ReportViewer.aspx?%/ESE_PRODUCTION/Event Manager/Purchase_Order&ord_no=${ordernumber}&rs:Command=Render&rs:Format=PDF`
   return <ul key={alldata.id}> 
                                  <li><input id={alldata.id} defaultValue={alldata.supplier_email} onChange={e => setInput1(e.target.value)} size="35"/></li> 
                                  <li><input id={alldata.id} defaultValue={alldata.confirmed} onChange={e => setInput2(e.target.value)} size="35"/></li>
                                  <Button component={Link} to={_link}>
                                    Posts
                                  </Button>
                                  <button id={alldata.ID} onClick={handleUpdate}>Update</button>
                                  
                                </ul>
                            })}

CodePudding user response：

Use template literals This code should work for you

{data.map((alldata) => (
                    <ul key={alldata.id}> 
                      <li><input id={alldata.id} defaultValue={alldata.supplier_email} onChange={e => setInput1(e.target.value)} size="35"/></li> 
                      <li><input id={alldata.id} defaultValue={alldata.confirmed} onChange={e => setInput2(e.target.value)} size="35"/></li>
                      <Button component={Link} to=`http://sqlserver15/ReportServer/Pages/ReportViewer.aspx?%/ESE_PRODUCTION/Event Manager/Purchase_Order&ord_no=${ordernumber}&rs:Command=Render&rs:Format=PDF`>
                        Posts
                      </Button>
                      <button id={alldata.ID} onClick={handleUpdate}>Update</button>
                      
                    </ul>
                ))}