So basically on a homepage of app I have a sections with career details blocks.When clicking on one of them react-router redirects onto new view, something like - /careers/position1.
So I want to keep Career link active only not other ones (https://gyazo.com/f9da42d9a1d427c66e54026421fa2b6b).
Code:
class Career extends React.Component {
render() {
let vacancies;
if (!this.props.vacancies.length) {
vacancies = <p>Sorry, no vacations currently available.</p>
} else {
vacancies = this.props.vacancies.map((item) => (
<Link
to={`/careers/${item.Id}`}
className='career_position'
key={item.Id}>
{item.Title}
{!!+item.IsHot && <LazyImg src={FireLogo} alt='Hot vacancy' />}
</Link>
))
}
return (
<div className='career_container'>
<h1 className='section_heading'>Career</h1>
<div className="section_content">
<h3>We are hiring! Please, do not hestitate to contact us regarding any questions you might have.</h3>
<div className='career_content_wrapper'>
<div className='career_recruiter'>
<LazyImg src={CareerRec} alt="Recruiter" />
<h2>Mary</h2>
<h3>recruiter#leobit.co</h3>
<LazyImg src={LinkEdin} alt="Linkedin profile" />
<LazyImg src={Skype} alt="Skype profile" />
</div>
<div className='career_positions_container'>
{vacancies}
</div>
</div>
</div>
</div>
);
}
}
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>
I'm using react-scroll to navigate to different sections on the same page. I've been following a tutorial and everything works but I have dummy text in each section and now I don't know how to change the content to my components. Basically I have three components and I want one to be displayed in each section of my web page but I can't get it working.
I don't want title, subtitle, dark etc in each section. Instead I want to just put my whole component in that section.
Can someone show me how I would put one of my components in each section (there are three components and three sections)? Is this possible or do I have to re-structure my website so that the content is separated in to different parts like shown in section.js?
Important: The part which I don't understand is how to link up my content in Section.js:
Section.js
import React from "react";
export default function Section({ title, subtitle, dark, id }) {
return (
<div className={"section" + (dark ? " section-dark" : "")}>
<div className="section-content" id={id}>
<h1>{title}</h1>
<p>{subtitle}</p>
</div>
</div>
);
}
App.js
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
<Section
title="section1"
subtitle={dummyText}
id="section1"
/>
<Section
title="section2"
subtitle={dummyText}
dark={false}
id="section2"
/>
<Section
title="section3"
subtitle={dummyText}
dark={true}
id="section3"
/>
</div>
Navbar.js
<nav className="nav" id="navbar">
<div className="nav-content">
<button
className="nav-logo"
alt="Logo"
onClick={this.scrollToTop}
>Top</button>
<ul className="nav-items">
<li className="nav-item">
<Link
activeClass="active"
to="section1"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
About
</Link>
</li>
Do you need to pass a component to your Section Component instead of these params?
{ title, subtitle, dark, id }
if this is a case, you can use children
export default function Section({ children }) {
return (
<div>
{children}
</div>
);
}
then you can put your component here:
<div className="App">
<Section>
// your component
</Section>
</div>
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>
);
}
}