I have a react component that renders the answers of a contact form and presents them in the page.
eg:
const Quote = ({fields}) => {
return (
<>
<div>
Business Type: {fields.businesstype.value}
</div>
....
</>
)
}
I need to send the rendered data to the php backend in order to send them as an email.
The question: Can I use the same component to get the rendered data (in a variable) and send them to backend (with axios)
Thank you for your time.
You can set ref to target Component (in this case Quote) and
use it like this:
ReactDOM.findDOMNode(quoteRef).innerHTML
to get rendered HTML code of that component
take a look at this
you can add ref to your component and have full access on that like this
const Quote = ({fields}) => {
const ref = React.useRef()
return (
<>
<div ref={ref}>
Business Type: {fields.businesstype.value}
</div>
....
</>
)
}
Related
I'm doing some work in NextJS and I needed to render a card so I created the api endpoint setup the query debugged incorrect client state on the page and now it appears that my state variables are correct but I am still not rendering what I would expect.
I'm trying to render a JSON object that looks like this:
[{"id":"cla02oxnl0000txe0vzncxq7o","creator":"cl9x4lmhv00021snptuymv0vr","broken_item":"","issue_desc":"","loc":"","active":true,"prio":"Low"}]
And I can see a valid JSON object in the list of tickets I want to render:
Client side in the console by logging the tickets array.
But I must have some syntax or misunderstanding of how I'm allowed to render here is my code for the page render:
if (!currentSession) {
return (<div> No Session</div>)
}
return (
<div>
{console.log(tickets)}
{tickets.map(({creator,broken_item, issue_desc, loc, prio,active}) => {
<TicketGUI creator={creator} broken_item={broken_item} issue_desc={issue_desc} loc ={loc} prio={prio}/>
})}
</div>
)
And the component that is trying to render it's own props just looks like this:
export default function TicketGUI(props){
return <p> {props} </p>
}
I had the syntax slightly off but my main issue is that I forgot to return something inside the anonymous function inside the map. This will fix the issue and render:
return (
<div>
{}
{tickets.map(
({creator,broken_item, issue_desc, loc, prio,active,creatorName}) => {
return(
<li key={listLength++}>
<TicketGUI creator={creator} broken_item={broken_item} issue_desc={issue_desc} loc ={loc} prio={prio} active={active} name={creatorName}/>
</li>
)
}
)}
</div>
)
I have a React component called TextInput which looks like this:
const TextInput = React.forwardRef<HTMLInputElement, ITextInputProps>(
({ error, ...props }, ref) => {
return (
<>
<input
type="text"
aria-describedby="" // 👈 see here
ref={ref}
{...props}
/>
{error && (
<p> // 👈 how can I reference this?
{error}
</p>
)}
</>
)}
)
For accessibility, I am trying to link the error message to the field using aria-describedby.
In a normal HTML document I would just use the id of the paragraph tag, but with reusability in mind, I would like to learn how to do this in a React-like way.
The use of refs comes to mind, but I'm not sure how to apply it in this scenario.
I would say that the best way to do this is to create a required prop that handles the ID and you apply that ID on the aria fields.
With that in mind, if what you wanted is to generate the data dinamically you could use a useEffect running it only once and setting a state inside it.
function Component() {
const [describedBy, setDescribedBy] = useState()
useEffect(() => {
setDescribedBy(generateRandomString());
}, [])
return (
<div aria-describedby={describedBy}></div>
)
}
I am completely new to react. I created a component like this:
import React from "react"
function Product(props) {
return (
<div>
<h2>{props.product.name}</h2>
<button onClick={() => document.querySelector(".desc").style.display="block"}>More info</button>
<p className="desc" style={{display: "none"}}>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>
</div>
)
}
export default Product
Then I render a few of the components in the App. The purpose of the button is that it should show the information about the specific component. However this way, Im always selecting the first element with "desc" class name.
How to select the element from the current component easily?
How to select the element from the current component easily?
You wouldn't do it like that with react. The way to alter what your app shows is to alter the state. Create a component that has state that reflects what should be rendered. Then when an interaction happens (e.g. a button click) alter the state. React will re-render and show your app according to the new state:
function Product(props) {
// create a state that holds the information if details should be displayed
// we initially set it to false
const [showDetails, setShowDetails] = useState(false);
// create a callback that toggles the state
// we will pass that to the onClick handler of our button
const handleToggleInfo = () => setShowDetails(current => !current);
return (
<div>
<h2>{props.product.name}</h2>
<button onClick={handleToggleInfo}>More info</button>
{showDetails && (
/* this will only get rendered if showDetails is true */
/* you don't need any css to "hide" it, it will just not render in the first place */
<p className="desc">
{`${props.product.price.toLocaleString("en-US", {
style: "currency",
currency: "USD"
})} - ${props.product.description}`}
</p>
)}
</div>
);
}
Generally speaking it isn't necessary with react to select DOM elements and alter them. This is all handled by state updates and re-rendering the components. A component describes the DOM given a current state and props. If you want your DOM to change describe that with state and props.
If you are not familiar with state in react you should really search for a good tutorial that covers that. It is a basic core concept of react. Without it you will not be able to create an app that has interactivity.
Tip: If you want to display a string that is constructed from multiple parts use template strings.
This is not reactish, you need to leverage your UI changes to the state
function Product(props) {
const [isDescVisible, setIsDescVisible] = useState(false);
return (
<div>
<h2>{props.product.name}</h2>
<button onClick={() => setIsDescVisible(true)}>More info</button>
{isDescVisible &&
<p className="desc">
{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}
</p>
}
</div>
)
}
I would like to insert advertisement block (such as Google Adsense) inside of items list. I am using the react-redux & react-connect. Even if I need to refresh the feed and rerender, I would like to run the render of ad-block div only one time. Is there any way we can do this?
render(){
const { feed } = this.props;
return(
<div>
<div class="ad-block"><!-- Need To Render one time --></div>
<div class="items">
{_.map(feed.data, item => {
return <div class="item">.......</div>
})}
</div>
<div class="ad-block"><!-- Need To Render one time --></div>
);
}
How about to split it in 3 components?
export const Something = () => (
<>
<AdBlock>
<Feed>
<AdBLock>
<>
);
And connect Feed separately through Redux.
We are presenting dynamic error messages which are listed in a locale file as a const. As a part of that string, I am placing text [Alert] which I would like to replace with an imported alert component (which displays a nice alert etc).
How do I go about replacing part of a string in a const with a react component?
#KyLane , what about rendering the alert JSX inside the message Component as below ?
const renderAlert = () => (
<h1>this is an alert Component</h1>
)
const AlertMessage = ({ renderAlert }) => (
<div>
<p>This is a message<br/>
{renderAlert()}<br/>
End of the message
</p>
</div>
);
this is a link to codesandbox so you could try it.