Here I have list of values in index.js as
1
2
3
render() {
const { id,heading,body,status,user} = this.props
const {det} = this.state
console.log(val);
return (
<a href='/details' style={{ color: 'green' }} onClick={this.sendValue.bind(this)}>
<div className="member" style={this.style}>
<h1>{id}</h1>
<h3>Reported by: {user}</h3>
<h3>{heading}</h3>
<h5>{body}</h5>
<h5>The current status is: {status}</h5>
</div></a>
)
}
here if I click that div tag mentioned I should be able to render to details page with the id value. I should be able to append the id value with other url mentioned in the details.js
Please help me to find the solution
Your should check this page which uses react-router to implement your scenario.
There can be <Link to="/one">1</Link> for your case and a defined, <Route path="/one" component={One} /> where One is the component which will be rendered when the url is '/one'
You can append the page number in the url after defining in the router as
<Route path="/one/:pageNumber" component={One} />
And in the detailed page component you can read the value using the object
this.props.match.params.pageNumber
Related
I am learning Javascript / React and I have been doing this react project to make memes and I have all the data regarding the memes in an array of objects but I am stuck now for days without getting it to do what I want.
Inside each object is a name with a value, an ID with a value, A blank with the image URLs. I want to display the names to the user in a dropdown and I want to get access to the ID and blank value of the selected name from the dropdown so that I can feed the image to the user.
I have tried extracting the names and the IDs into separate strings and check for a matching word but sometimes the string value of the ID is not even included in the string values of the name, so that didn't work at all and now I did it like a kind of a hack with a counter that increases each time the onChange function is called and I used the number to feed the image according to the index matching the number but this gives me the wrong image anytime that a user decides to choose image randomly. This may sound a bit abstract so I have included some screenshots here and my code with a link to a code sandbox where all the program lives and hoping to get the help that I need, please.
Hers is the Code Snippets;
export default function MyComponent() {
const [bulkImageArray, setBulkImageArray] = useState([]);
const [counter, setCounter] = useState(1);
const [imageUrls, setImageUrls] = useState();
const [imagesNames, setImagesNames] = useState();
// This is the function that should get me access to the object id value when any value is selected.
function handleChange(event) {
setCounter(counter + 1);
console.log('You just selected: ' + event.target.value);
// setImagesNames(event.target.value);
setImagesNames(bulkImageArray[counter].name);
setImageUrls(bulkImageArray[counter].blank);
console.log(typeof event.target.value);
}
return (
<div>
<select onChange={handleChange}>
{bulkImageArray.map((item) => (
<option key={item.id}>
{/* {item.id} */}
{item.name}
</option>
))}
</select>
<img src={imageUrls} alt={imagesNames} />
<div>
{bulkImageArray.map((item) => (
<img
style={{
width: '400px',
height: '400px',
cursor: 'pointer',
}}
key={item.id}
alt={item.name}
src={item.blank}
/>
))}
</div>
</div>
);
}
}
screenshots:
Array of Objects Structure:
Single Object Structure:
Function Tigered on select:
The dropdown for users to select the image:
I don't know if all this information is enough but this is the code sandbox to the complete project.
Thanks in advance.
You should add value={item.id} to option, so that select onChange can select the value to id, then use the id to find the selected item.
I was learning React and I came to a point which created confusion. Everywhere I was using props while writing Function components.
I always use props.profile and it works fine. But in one code component, I had to write
const profiles=props; and it worked fine.
I tried using const profiles=props.profile; and also I tried using inside return in 'Card' function component
{props.profile.avatar_url} but both of them failed
Below is my code which works fine
const Card=(props)=>{
const profiles=props; //This I dont understand
return(
<div>
<div>
<img src={profiles.avatar_url} width="75px" alt="profile pic"/>
</div>
<div>
<div>{profiles.name}</div>
<div>{profiles.company}</div>
</div>
</div>
);
}
const CardList=(props)=>{
return(
<div>
{testDataArr.map(profile=><Card {...profile}/>)}
</div>
);
}
Can someone please help me understand why I can't use const profiles=props.profile?
What are the other ways to achieve the correct result?
Your testDataArr might be this,
testDataArr = [{avatar_url:"",name:"",company:""},{avatar_url:"",name:"",company:""},{avatar_url:"",name:"",company:""}]
Now when you do this,
{testDataArr.map(profile=><Card {...profile}/>)}
here profile = {avatar_url:"",name:"",company:""},
and when you do,
<Card {...profile}/>
is equivalent to,
<Card avatar_url="" name="" company=""/>
In child component, when you do this,
const profiles=props;
here props = {avatar_url:"",name:"",company:""}
So you can access it's values,
props.avatar_url
props.name
props.company
But when you do this,
const profiles=props.profile
profile key is not present in {avatar_url:"",name:"",company:""} object and it fails.
OK. Here is the issue, the props object does not contain a profile attribute, but IT IS the profile attribute. Becouse you are spreading the profile variable when you render the Card element (in the CardList), you basically are writing:
<Card avatarUrl={profile.avatarUrl} comapny={profile.comany} />
Instead, you should do
<Card profile={profile} />
and then in your Card component access the data this way
const Card = (props) => {
const profile = props.profile
}
or even simpler
const Card = ({profile}) => {
return <div>{profile.comany}</div>
}
I'm trying to develop a React program that changes information in a component each time the button "rectForward" or "rectBackward" is pressed. I'm passing the information in the form of an array of objects into my Body component from "importData" as seen below. That data is then converted into each object's indvidual data pieces through the map functions listed directly after render() is called. What I want to happen when the rectForward button is pressed is for the "text1" array value in Column1 to incrament by 1. The same happens when rectBackward is pressed, but I want the value to decrement. My primary difficulty is the syntax. As you can see in the statement onClick={Column1.text1=text1val[++], this was my first attempt at implementing this functionality, but the syntax is definitely incorrect. I was wondering if I could get some help formatting this
import React from "react";
import "./Body.css";
import Column1 from "./Body/Column1/Column1";
import "./Buttons.css";
import Column2 from "./Body/Column2/Column2";
import myData from "./myData";
class Body extends React.Component {
constructor() {
super()
this.state = {
importData: myData
}
}
render() {
var ID = this.state.importData.map(item => item.id)
var text1val = this.state.importData.map(item => item.text1)
var text2val = this.state.importData.map(item => item.text2)
var text3val = this.state.importData.map(item => item.text3)
return(
<div className="mainBody">
<div className="backPain">
<div className="holder">
<Column1 key={ID[0]} text1={text1val[0]}>
</Column1>
<div className="rectHolder">
<div className="rectForward" onClick={Column1.text1=text1val[++]}
<h2>Next</h2>
</div>
<div className="rectBackward">
<h2>Prev</h2>
</div>
</div>
<Column2 key={ID[0]} text2={text2val[0]} text3={text3val[0]}>
</Column2>
</div>
</div>
</div>
)
}
}
export default Body;
Thanks so much!
Simple thing i will do is keep an index in state. Than pass a function to next and prev which takes care of changing this index. and will show the values based on current state.
this.state = {
currentIndex : 0
}
HandleCurrentIndex(type){
if(type === 'inc'){
this.setState({currentIndex: this.state.currentIndex++})
} else {
this.setState({currentIndex: this.state.currnIndex-1 })
}
}
<div className="rectForward" onClick={()=>this.HandleCurrentIndex("inc")}>
<h2>Next</h2>
</div>
<div className="rectBackward" onClick={()=>this.HandleCurrentIndex('dec')}>
<h2>Prev</h2>
</div>
On side note:- This is just and example in product you should take care of index going below zero as well index exceeding limits of your data. which in turn will show undefined values. simple thing you should do is whenever it goes out of limit just reset it to default value ( 0 )
I have a react component called <Currency /> that takes a currency and value.
So if I did <Currency value={10} currency={"USD"}/> it would return <span>$10.00</span>
I am then using this in a separate component.
if (amount < limit){
let value = <Currency value={this.state.depositLimit} currency={this.state.currency} />;
return this.setState({
error:`Minimum limit is ${value}`
});
}
This renders Minimum deposit is [object Object] on the screen.
Does anyone know how I can just show the content of the component i.e. $10.00
I would avoid using JSX outside of a render function. Additionally, avoid putting too much information in your component state. I suggest storing the nature of the error, not necessarily the error message itself.
this.setState({
minDepositError: true,
});
Instead, use the render function to spell out the error message.
if (this.state.minDepositError) {
return (
<div>
<span>Minimum limit is </span>
<Currency
currency={this.state.currency}
value={this.state.depositLimit}
/>
</div>
);
}
ReactServer renderToString is what you want.
ReactDOMServer.renderToString(value)
I am trying to figure out how to conditionally render a partial in react. My condition is that when a list item is active, the partial should be rendered.
I am using bootstrap, which has an active element available for use.
My goal is to achieve something similar to intercom's terms page: https://www.intercom.com/terms-and-policies#billing
In my main menu, I have:
import React from 'react';
import ReactDOM from 'react-dom';
var Terms = require('../overview/terms.jsx');
var Privacy = require('../overview/privacy.jsx');
var Cookies = require('../overview/cookies.jsx');
var Thirdparty = require('../overview/thirdparty.jsx');
var Website = require('../overview/website.jsx');
var Sla = require('../overview/sla.jsx');
var Acceptable = require('../overview/acceptable.jsx');
var Billing = require('../overview/billing.jsx');
var Information = require('../overview/information.jsx');
var Incident = require('../overview/incident.jsx');
var Bug = require('../overview/bug.jsx');
class Menu extends React.Component {
render() {
return (
<div>
<div className = "row">
<div className = "col-md-8 col-md-offset-2 generalhead">
Terms and Policies
</div>
</div>
<div className = "row">
<div className = "col-md-3 col-md-offset-1">
<ul className="list-group">
Terms of Service
Privacy Policy
Cookies
Third Party Processors
Website Use
Service Level Agreement
Acceptable Use
Billing
Information Security
Incident Response Plan
Bug Bounty
</ul>
</div>
<div className = "col-md-6 col-md-offset-1">
<Terms />
<Privacy />
<Cookies />
<Thirdparty />
<Website />
<Sla />
<Acceptable />
<Billing />
<Information />
<Incident />
<Bug />
</div>
</div>
</div>
);
}
}
module.exports = Menu;
Each list item has a named data attribute. When that attribute is the active item, I want to then render the partial. At the moment all of them are rendering.
I have read the react docs on conditional rendering: https://facebook.github.io/react/docs/conditional-rendering.html
I was trying to define a const called active that I thought might make use of the bootstrap class - but that isn't working. I must have the wrong end of the stick for how to do this. I seems like a simple hide show for a rails js toggle. I can't figure out how to get started on tackling this in react.
Can anyone give me a steer in the right direction?
Keep track of which list item is active in your state
<a href="#" onClick={() => this.setState({active: 'terms'})}>Terms of Service</a>
Then conditionally only render the active item
{this.state.active == 'terms' && <Terms />}
But I suggest using react router instead since each item seems to correspond to a page.
Edit
You have to add a constructor to your class to make it stateful
class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false
};
}
.
.
.