I am trying to generate pdf of below React component
function DocumentPrint() {
return (
<div className="container">
<h1 className="heading__main">This is a demo heading</h1>
<div>
<h3 className="heading__title">This is another heading</h3>
<p className="para__text">Breakable components try to fill up the remaining space before jumping into a new page. By default, this group is composed by View, Text and Link components
Unbreakable components are indivisible, <b>therefore</b> if there isn't enough space for them they just get rendered in the following page. In this group by default we only find Image.</p>
</div>
<div id="unordered__list">
<ul className="list">
<li>Amit</li>
<li>Suraj</li>
<li>Priya</li>
</ul>
</div>
</div>
)
}
const Doc = () => {
return (
<div>
<PDFDownloadLink
document={<DocumentPrint />}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) =>
loading ? <button>Loading document...</button> : <button>Download now!</button>
}
</PDFDownloadLink>
</div>
)
}
This is not showing Download now button and loading is not set to false.
Error in console
TypeError: Cannot read properties of undefined (reading 'height') at setNodeHeight
Related
I would like to pass information through the Link tag to another component . However , i am unable to after watching several tutorials .
function Productscard(props) {
return (
<div className="item">
<Link to = "/products_info">
<div className="item_container">
<h3 className="subcategory_Tag"> {props.subcategory}</h3>
<h2 className="name_tag"> {props.name}</h2>
<img src={photo} alt="" className="photo" />
<h3 className="price_tag">$399.99 - $500</h3>
</div>
</Link>
</div>)
}
export default Productscard
There are several Productscard components being rendered on the page . Upon being clicked , they should take me to the products_info page and display product name and description . I have attempted unsuccessfully and below is my product_info component -
function Product_info(props) {
const params = useParams();
return (
<div className="product_info">
<h1>
{params.name}
</h1>
</div>
)
}
export default Product_info
I have also set the route in app js
<Route path="/products_info element={<Product_info />}/>
I have tried the above code unsuccessfully
i want to display categories and thier questions, from database as api throught flask and react app. i got that error all the recat app that contain list, add and play questions. i think the porblem is the side of the react app. the flask api display json format correctly. any help guys
python ( flask)
#app.route("/categories/<int:category_id>/questions", methods=['GET'])
def get_question_based_category(category_id):
question_based_category=Question.query.filter(Question.category==str(category_id)).all()
formatted_questions=[]
questions_per_page=10
page=request.args.get('page',1,type=int)
start=(page-1)*questions_per_page
end=start+questions_per_page
for searchquestion in question_based_category:
formatted_questions.append(searchquestion.format())
return jsonify({
'success':True,
'question':formatted_questions[start:end],
'total_of _searched_question':len(question_based_category),
'current_category':searchquestion.category
})
create js
render() {
return (
<div className='question-view'>
<div className='categories-list'>
<h2
onClick={() => {
this.getQuestions();
}}
>
Categories
</h2>
<ul>
{Object.keys(this.state.categories).map((id) => (
<li
key={id}
onClick={() => {
this.getByCategory(id);
}}
>
{this.state.categories[id]}
<img
className='category'
alt={`${this.state.categories[id].toString().toLowerCase()}`}
src={`${this.state.categories[id].toString().toLowerCase()}.svg`}
/>
</li>
))}
</ul>
<Search submitSearch={this.submitSearch} />
</div>
<div className='questions-list'>
<h2>Questions</h2>
{this.state.questions.map((q, ind) => (
<Question
key={q.id}
question={q.question}
answer={q.answer}
category={this.state.categories[q.category]}
difficulty={q.difficulty}
questionAction={this.questionAction(q.id)}
/>
))}
<div className='pagination-menu'>{this.createPagination()}</div>
</div>
</div>
);
}
component file :-
{data.map(()=>{
return(
<div>
api data show here
</div>
)
}
ErrorFallback File Code:-
const ErrorFallback = ({ componentStack, error }) => (
<section className="fallback">
<header className="fallback__header">
<h3 className="fallback__title">Oops! An error occured!</h3>
</header>
<div className="fallback__body">
<p>
<strong>Error:</strong> {error.toString()}
</p>
<p>
<strong>Stacktrace:</strong> {componentStack}
</p>
</div>
</section>
)
i want when api will throw error due to some reason then error component show
Sorry in advance if I seem confused, it's because I am.
So from my App.js file which is like the main file where I call all my components and query my DB, which is then called by the index.js file.
this is my render method.
render() {
return (
<div className="site" >
{
!!!this.state.done ? (
<LoadingSVG />
) : (
<div className="page">
<div className="header-wrapper">
<Header data={this.state.dataHeader} />
</div>
<div className="project-list-wrapper">
<ProjectList data={this.state.dataProjects} />
</div>
</div>
)
}
</div >
)
}
Inside the Projectlist component I loop through every items and create a project.
render() {
return (
<div className="project-list module">
<div className="sectionTitle">Project I've worked on</div>
{this.props.data.map((res, i) => (
<div className="project-wrapper">
<div className="inner-ctn">
<div className="header">
<div className="number">0{res.id + 1}</div>
<div className="name">{res.nomProjet}</div>
</div>
<div className="item-ctn">
<div className="categ">{res.categProjet}</div>
<div className="roles">{res.roles}</div>
<div className="date">{res.date}</div>
</div>
</div>
</div>
))
}
</div>
);
}
What I want to do is with the use of transition-groups, render another component.. let's call it Project-1. Project 1 would refresh my App.js content so that the new component would render. But I can't do that since App.js is parent to ProjectList. I also want to keep a well structure project so I don't want to put everything in a single file..
I tried reading the documentation and basically every article about how to do this, I can't seem to wrap my mind around how this should work. This should be easy stuff, yet it's weirdly complicated to have a transition or even a link between two pages..
My application renders twelve random people fetched from a different website. Everything works fine apart from my modal component(it should render more information about the person you clicked). For some reason whenever I try to render it I get this error 'Modal.js:9 Uncaught TypeError: Cannot read property 'medium' of undefined' and more errors comes with it. I am printing props.modalInfo from the Modal component to the console and it does have all the information I need, but for some reasons it shows that props.modalInfo is undefined when I try to render it. I have never done modal box in React (I am a beginner). Could someone explain me how I can render my Modal and pass all the data successfully? Thank you in advance!
handleClick(id) {
this.setState((prevState) => {
const modalInfoToPass = prevState.employeeList.filter(employee =>
{
if(`${employee.name.first} ${employee.name.last}` === id){
// get only and only one object that fulfils the
// condition
return employee;
}
})
return {
displayModal: true,
// update the modalInfo state
modalInfo: modalInfoToPass
}
})
}
render(){
return (
<div className='container'>
<Header />
<main>
{
this.state.loading ? <h2 className='load-page'>Loading...</h2> :
this.state.employeeList.map(employee =>
<Employee key={`${employee.name.title}
${employee.name.last}`}
employeeInfo={employee}
**handleClick={this.handleClick}**
/>)
}
</main>
<Footer />
**{this.state.displayModal && <Modal modalInfo={this.state.modalInfo} />}**
</div>
);
}
function Modal(props) {
**console.log(props.modalInfo);**
return (
<div className='bg-modal'>
<div className='modal-content'>
<div className='modal-image'>
<img src={props.modalInfo.picture.medium} alt={`${props.modalInfo.name.title} ${props.modalInfo.name.first}`}/>
</div>
<div className='modal-info'>
<p className='name'>{props.modalInfo.name.first} {props.modalInfo.name.last}</p>
<p className='email'>{props.modalInfo.email}</p>
<p className='place'>{props.modalInfo.location.city}</p>
</div>
<hr />
<div className='modal-more-info'>
<p className='number'>{props.modalInfo.cell}</p>
<p className='address'>{`${props.modalInfo.location.street}, ${props.modalInfo.location.state}`}</p>
<p className='postcode'>{props.modalInfo.location.postcode}</p>
<p className='birthday'>{props.modalInfo.dob.date}</p>
</div>
</div>
</div>
);
}
What is id and is it on an employee? If it isn't available, you could just pass what you're filtering for in your handleClick:
handleClick={()=>this.handleClick(`${employee.name.first} ${employee.name.last}`)}
Or, you could just pass the employee:
handleClick={()=>this.handleClick(employee)}
and modify your handler:
handleClick(employee) {
this.setState({modalInfo: employee, displayModal: true})
}