How can I pass props to another component using React router link?
I tried to do it like this. However, it is not working.
By this I mean props are not passing through.
I want to pass information of currencies to another component and than use It.
Any suggestions?
return <Div>
<div className="header">
<Heading>Welcome To CoinValue </Heading>
</div>
<Ul>
{currentItems.map(currencies => {
return <Link
key={uuidv4()}
to={`/cryptoValute/${currencies.id}`
props={currencies}}><Li>{currencies.name}</Li></Link>
})}
<div>
{this.renderPagination()}
</div>
</Ul>
</Div>
Ciao, try to modify your code like this:
return <Div>
<div className="header">
<Heading>Welcome To CoinValue </Heading>
</div>
<Ul>
{currentItems.map(currencies => {
return <Link
key={uuidv4()}
to={{pathname: `/cryptoValute/${currencies.id}`, query: {currencies}}}><Li>{currencies.name}</Li></Link>
})}
<div>
{this.renderPagination()}
</div>
</Ul>
</Div>
Then in your component, to retrieve currencies value you could do this.props.location.query.currencies.
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>
);
}
I am learning React and I have a problem that I don't know how to solve, so If you can please help me with it.
I want to create a simple react app, where I create 3 components with .map() method. I would like to pass the data to Head component that I can access to every single card separately.
I have used .map() method but all cards are on one page. Can I do that with .map() method, and pass data to nav component?
function Card(props) {
return (
<Router>
<div id="wrapper">
<Link to="#"><button id="request" href="#">
REQUEST
</button></Link>
<h1 id="naslov">{props.name}</h1>
<p>{props.key}</p>
<div id="povez">
<a id="srcek"><FiHeart /></a>
<button id="follow">Follow</button>
<a id="kocka"><FiExternalLink /></a>
</div>
<div>
<h4 className="he4der">ORIGIN</h4>
<button id="origin">COUNTRY</button>
</div>
<div>
<h4 className="he4der">GENRE</h4>
<button id="origin">ROCK</button>
</div>
<div>
<h4 className="he4der">SUBGENRES</h4>
<button id="origin">ROCK</button>
<button id="origin2">METAL</button>
</div>
<div>
<button id="origin">ROCK</button>
<a id="kocka2"><FiExternalLink /></a>
</div>
<div id="breaker"></div>
<div id="socialinks">
<div id="social">
<span id="sicon"><FaFacebookF /></span>
<span id="sicon"><FaTwitter /></span>
<span id="sicon"><FaInstagram /></span>
<span id="sicon"><FaSpotify /></span>
</div>
<div id="plus">
<a id="kocka2"><FiExternalLink /></a>
</div>
</div>
</div>
)
}
export default Card
I would like to pass artist_name to nav component, so that when I
click on that name I can access card component that is related to that
name/artist.
Instead of passing a single artist it may make more sense to use all_artists and map your links. If all_artists isn't available globally it can be passed as a prop.
const Head = (props) => {
return (
<div id="header">
<img src={Logo} id="logo" />
<ul>
{props.artists.map(({ artist_id, artist_name }) => (
<li key={artist_id}>
<Link to={`/artist/${artist_name}`}>{artist_name}</Link>
</li>
)}
</ul>
<div id="icns">
<i><FiSearch /></i>
<i><FiAlignJustify /></i>
</div>
</div>
)
}
Pass all_artists to Head and render a dynamic route to extract name from the path to be passed on to Card on the name prop. Notice the Router was moved here to provide a routing context for both the Link components in Head and the Route component in App.
function App() {
return (
<div className="App">
<Router>
<Head artists={all_artists} />
<Route
path="/artist/:name"
render={({ match: { params: { name } } }) => (
<Card name={name}>
)}
/>
</Router>
</div>
);
}
Card will need to utilize a lifecycle to "react" to any changes on the name prop, like fetching/loading specific artist data from an API endpoint or redux state.
You need to pass to your component(that is rendering the card) what is the artist_id( as props) that you want to display and then you could use find() array method to search/filter the object that you need inside the array since you already have the ID of the artist.
and you might want to use switch and map() method on your router if you want all artist to be in your navigation
something like this:
<Switch>
{ all_artists.map( artist =>
<Route path=`/{artist.id}` render={ <CardComponent clickedArtist={artist} /> }/>
)}
</Switch>
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..
I'm creating a component which has array of items and showing them on one page using map function.
Need help on how I can show a detail view of a item by updating route value dynamically based on the item I clicked.
Currently when I click on a item know more though the url change to some wrong value I don't see any change in the page.
Component:
{location[area].map((item, index) =>
<div key={index} className="col-md-4 mt-3">
<div className="card">
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.description}</p>
<Link to={'/view/${item.title}'} onClick={() => addDetail(item)} className="btn btn-primary">Know more</Link>
</div>
</div>
</div>
)}
Router:
<Route path='/view/:id' exact component={DetailPage} />
DetailPage Component:
class DetailPage extends Component {
render() {
const selectedItem = this.props.selectedItem;
return(
<div>
<DetailedView selectedItem={this.props.selectedItem} />
</div>
);
}
}
Result Anchor Tag:
<a class="btn btn-primary" href="/view/${item.title}">Know more</a>
Onclick result url:
http://localhost:3000/view/$%7Bitem.title%7D
You need to use backticks for the to prop of your Link components so that template literals will be used and the variable will be inserted into the string.
<Link
to={`/view/${item.title}`}
onClick={() => addDetail(item)}
className="btn btn-primary"
>
Know more
</Link>
Well,As #tholle suggested use template literal.Your route seems fine, just make use of react life cycle method componentWillReceiveProps in the Detail Page Component.Here is the code
class DetailPage extends Component {
componentWillReceiveProps(nextProps){
if(this.props.match.params.id !== nextProps.match.params.id){
//make a call with updated nextProps.match.id or filter the existing data store
with nextProps.match.id
}
}
render() {
const selectedItem = this.props.selectedItem;
return(
<div>
<DetailedView selectedItem={this.props.selectedItem} />
</div>
);
}
}