What i want to do is make the items of the list clickable so that once i click on one of them it redirects me to another component for example if i am in /Answers i want to be redirected to /Answers/idOfitemClicked. How can i do that?
Here is the code of my render method:
render() {
const quesItems = this.state.questions.map((question, i) => {
return (
<li key={this.props.account.id === question.expID}>{question.description}
{question.senderID}</li>
);
});
return (
<div>
<h1> Answer the questions here!</h1>
<ul>
{quesItems}
</ul>
</div>
);
}
In your HTML, try having an href=/Answer/idOfItemClick in the item you are trying to make "clickable". In this case <ul>
Simply use html link element with href:
const quesItems = this.state.questions.map((question, i) => {
return (
<li key={this.props.account.id === question.expID}>
<a href={'/Answer/' + question.id}>
{question.description} {question.senderID}
</a>
</li>
);
});
Related
I have following code which doesnt show any list as expected.
I am confused why its not working , whats missing .
return (
<div>
List
<ul>
{events.map((event,index)=>{
<li key={index}>Name:{event.name}</li>
})
}
</ul>
</div>
);
Above code is a return block of function component I tried replacing the with many other tags but it just doesnt return anything expect the text outside the map function.
Please help.
You have a typo - you're using { } braces there, in which case you'd need a return too. Failing to have a return in a curly-braced function equals an implicit return undefined;.
return (
<div>
List
<ul>
{events.map((event, index) => {
return <li key={index}>Name:{event.name}</li>;
})}
</ul>
</div>
);
Or, more simply, use regular parentheses to make the return implicit (see Concise body here):
return (
<div>
List
<ul>
{events.map((event, index) => (
<li key={index}>Name:{event.name}</li>
))}
</ul>
</div>
);
I have a function that I would not like to render if a certain condition is not met.
runinrender(){
let data = this.props.loadedPolls;
return data.map((element,i) => {
return (<div key={i} className='elementPoll'>
<ul>
<li>Complaint: <p> {element.question}</p></li>
<li>Author: <p>{element.createdBy}</p> </li>
<li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
</ul>
</div>)
});
}
Essentially, I want to add
if the element.question.charAt(0) == 'K' only then return values of complaint, ModalComplaint and author, else return nothing
I have tried adding the if statement in multiple places; however, none seem to work.
Any help is appreciated.
You could use filter to narrow down your array before you map it.
Array.prototype.filter
runinrender(){
let data = this.props.loadedPolls;
return data.filter(element => element.question.charAt(0) === 'K').map((element,i) => {
return (<div key={i} className='elementPoll'>
<ul>
<li>Complaint: <p> {element.question}</p></li>
<li>Author: <p>{element.createdBy}</p> </li>
<li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
</ul>
</div>)
});
}
I am having an object with data having key and value
In the modal i was planning to show all the data from object in list tag
in singleproductdetails i am having object with key and value
{
Object.keys(singleproductdetails).forEach(function eachKey(key) {
return (
console.log("hello", key, singleproductdetails[key])
<li className="about-title"><label>{key} </label><span>:</span></li>
<li><p>{singleproductdetails[key]} </p></li>
)
})
}
i think this would work,
Object.keys(this.props.dataDetail).map(function(detail, id) {
return <span key={id}>{this.props.dataDetail[detail]}</span>;
})
or
Object.keys(this.props.dataDetail).map(function(detail, id) {
return (
<div>
<span key={id}>{this.props.dataDetail[detail]}</span>
<span key={id}>{this.props.dataDetail[detail]}</span>
... // many items
</div>
);
})
It looks like you're trying to return multiple elements in your JSX. Try to wrap your li elements in React.Fragment
Object.keys(singleproductdetails).forEach(function eachKey(key) {
return (
<React.Fragment>
<li className="about-title"><label>{key} </label><span>:</span></li>
<li><p>{singleproductdetails[key]} </p></li>
</React.Fragment>
)
}
)
I'm trying to move one element from .map to onClick function so that I can pass it to redux but I'm not sure how to proceed. This is my code
const Lists = lists.map((list, index) =>
<li key={index}> {list.name} <a href="#" onClick={this.listInfo.bind(this)}>Learn More</a> </li> );
this is the function
listInfo(event){
event.preventDefault();
var el = list.name //this is where I want to save that value;
console.log(el)
}
Thanks in advance
Try this....
const Lists = lists.map((list, index) =>
<li key={index}> {list.name} <a href="#" onClick={(e) => this.listInfo(e, list.name)}>Learn More</a> </li> );
And change your function to this...
listInfo(event, listName){
//.....
console.log(listName);
}
I am working on a CMS system with nested sub menus that are different depending on user / customization ,etc.
Trying to solve this problem I am placing a map function inside of a react component. As per documentation this approach works with only one nested map fucntion, but apparently not a second one, which is what I need to render sub menus, any ideas?
render() {
return (
<div className="ui dropdown item">
{this.state.text}
<i className="dropdown icon"></i>
<div className="menu">
{multipleOptions.split(',').map(function(option, i){
option.split('#').map(function(subOption, i){
return <a className="item" key={i + "random"}>{subOption}</a>;
})
})}
</div>
</div>
)
}
You need to add return inside first .map
{multipleOptions.split(',').map(function(option, i) {
return option.split('#').map(function(subOption, i) {
return <a className="item" key={i + "random"}>{ subOption }</a>;
})
})}
#AlexanderT.'s answer is correct. It reads a little nicer if you use arraow functions too
{multipleOptions.split(',').map((option, i)=>
option.split('#').map((subOption, i)=>
<a className="item" key={i + "random"}>{subOption}</a>))}