Im new to React. Im trying to convert an array contains links into something that will show the links in order in the website.
something like this:
external_references = ["https://google.com", "https://en.wikipedia.org/wiki/Wiki"]
into something to show up in the server like this:
external_references:
https://google.com(link)
https://en.wikipedia.org/wiki/Wiki(link)
I tried to do the following code I found but it failed to work:
<span className="externalRefs">External_references: <br></br> {external_references.forEach(link => {
return new DOMParser().parseFromString(link, "text/xml");
})}</span>
you can try the map function:
<p>external_references:</p>
{external_references.map(link=>{
return <div key={link}>
<a href={link}>{link}</a>
</div>
}
}
I recomend you as a good practice using the link as a key, since each of them should be different.
just
{external_references.map((reference, i) => {
return(
<div key ={i}>
<a href ={reference}>{reference}</a>
</div>
);
})}
You can use the Array.map function.
<span className="externalRefs">External_references: <br></br>
{
external_references.map(link, i) => {
<div key ={i}>
<a href ={link}>{link}</a>
</div>
}
}
</span>
Related
Why i got this error? I wanna create menu for mobile devises, but i do not have enough experience for this, so i decided to try to do something like this:
function Header() {
const [menuIsClicked, setmenuIsClicked] = useState(false)
const auth = useContext(AuthContext)
const clickMenuHandler = (menuIsClicked) => {
if (menuIsClicked) {
return setmenuIsClicked(false)
}
return setmenuIsClicked(true)
}
return (
<>
<header className="hd-home">
<MenuForMobiles menuIsClicked={menuIsClicked} clickMenuHandler={clickMenuHandler} />
<div className="nav-link1">
Home
About
Donate
</div>
<div className="nav-link2">
Profile
<a className="nv-btn"
href=""
>Exit</a>
</div>
</header>
<a href="">
<WeeklyNews />
</a>
</>
)
}
function MenuForMobiles(menuIsClicked, clickMenuHandler) {
if (menuIsClicked) {
return (
<div className="m-o"
style={{
backgroundColor: 'pink',
width: '100vw !important',
height: '100vh !important',
}}>
<i onClick={() => clickMenuHandler}>
<FontAwesomeIcon icon={faListUl} />
</i>
</div >
)
}
return (
<div className="m-o">
<FontAwesomeIcon icon={faListUl} />
</div>
)
}
I think that a problem is on my clickMenuHandler function.
Thx for any advices and help. By the way, as you can see, i am new on react :)
First of all, this error can be caused by plugins in your browser. In my case it was google translator. I just removed it cuz i don't use it, but will be better if you'll try to ignore/catch this error.
Second, you can use source code like this to make things like DropDownButton
https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/
I am making list of button that will lead to different YouTube videos on ReactJs page. The issue is that when I map the links from json file (which contains video links), all the buttons get the last link of the mapped array. I need a way that all the rendered buttons will get their respective links. My code is below, I am using react ModalVideo to show my YouTube video.
<ul className="list-unstyled">
{datalist.lectures.map((value, index) => {
return (
<li key={index}>
<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId={value} onClose={() => setOpen(false)} />
<button className="play-icon" onClick={()=> setOpen(true)}> <i className="las la-play"></i> Lecture: {index+1}</button>
</li>
)})}
</ul>
All the links are coming from Json file where the code looks like this
"lectures": [
"BT4YihNXiYw",
"NSFLhnv2pQI",
"sEPxqpFZit8",
"fU8QhoUJ_sE",
"r3XFYOtvUng",
"MZAkMddxhpg"
]
I think the problem I have right now is that after the page render and mapping ends it only remembers what the last link is store in value, because of that no matter which button i click it shows me the last value of the mapped array
Just some quick ideas looking at the minimal snippets available.
let's not to render multiple ModalVideo component like above, move it out from the map.
Use another state to keep track the change of the youtube videos' ID.
For example
const [isOpen, setOpen] = useState(false);
const [videoId, setVideoId] = useState(null);
const playVideo = (vid) => {
setOpen(true);
setVideoId(vid);
};
return (
<div>
<ModalVideo
channel='youtube'
autoplay
isOpen={isOpen}
videoId={videoId}
onClose={() => setOpen(false)}
/>
<ul className="list-unstyled">
{
datalist.lectures.map((value, index) => {
return (
<li key={index}>
<button className="play-icon" onClick={() => playVideo(value)}>
<i className="las la-play"></i>
Lecture: {index + 1}
</button>
</li>
)
})
}
</ul>
</div>
);
i
I don't succeed to fix the bug
I need that in tablle show buttom
I copy the code from fluent UI https://developer.microsoft.com/de-de/fluentui#/controls/web/detailslist/customitemcolumns
enter image description here
but this in give bug in onrenderItem because the declared columns
enter image description here
i try this but have bug
enter image description here
i sucsses to fix the bug
return (
<div>
<div>
<div className="ms-Grid">
<div className="ms-Grid-row">
<DetailsList
items={item}
columns={columns}
setKey='set'
onRenderItemColumn={renderItemColumn}
/>
</div>
</div>
</div>
</div>
);
const renderItemColumn = (item: any, index: any, column: any) => {
let fieldContent = item[column.fieldName];
switch (column.key) {
case 'custem':
return <Link href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link" >ukbkkbio</Link></span>
default:
return <span >{fieldContent}</span>;
}
}
https://codesandbox.io/s/rough-cache-vgl3p?file=/src/App.tsx
I am new to reactJS. I have a JSON file which looks like this:
I want to extract data and display each post with its comments, user who commented and created time and display it with JSX using the map function.
So I declared an empty array called items in my state and put all these data into it and tried to browse it but I got this error:
×
TypeError: Cannot read property 'data' of undefined
this is my code:
render() {
return (
<div>
<h1>Hello World !!!! </h1>
<ul>
{ this.state.items.comments.data.map(item => <li key={item.id}>{item.data[item].from.name}</li>)}
</ul>
</div>
)
}
Nice to meet you.
I can solve it.
Please do like below.
render() {
return (
<div>
<h1>Hello World !!!! </h1>
<ul>
{ this.state.items.comments.data.map(item => <li key={item.id}>{item.from.name}</li>)}
</ul>
</div>
)
Please reply with your opinion.
Best regards.
in your json file look like you get array of array
try with this hope this will work
this.state.items.map((item,index)=>{
this.state.items[item].comments.data.map(element=>
<li key={item.id}>{item.from.name}</li>)
})
})
I figured out that I have to use map inside another map because I have an array in another array and this code solved the problem:
render{
return (
<div>
{
this.state.items.map((item) => {
return (
<div>
<h4>{item.id}</h4>
<ul>
{
item.comments.data.map((data) => {
return (
<li>
{data.message} : {data.created_time} : {{data.from.name}
</li>
);
})
}
</ul>
</div>
);
})
}
</div>
);
}
I have constructor of ViewModel below:
export class ViewModel{
data_1 = {id: 1, name: 'John'};
currency = {id: 1, name: 'USA'};
}
And in my html, I bind data by "with.bind":
<div with.bind="data_1">
<span textcontent.one-time="id"></span>
<span textcontent.one-time="name"></span>
<div with.bind="currency">
<span text.content="name"></span>
</div>
</div>
I have problem when I want to bind my currency in data_1, it can't not recognize currency . How can I get currency?
Why not just simplify and get rid of with.bind?
<div>
<span textcontent.one-time="data_1.id"></span>
<span textcontent.one-time="data_1.name"></span>
<div>
<span textcontent.one-time="currency.name"></span>
</div>
</div>
The thing is that with attribute doesn't provide a reference to $parent context. I'm not sure this is the best way to handle it but you can create your own custom attribute that would have $parent.
Based on the original with:
import {inject} from 'aurelia-dependency-injection';
import {BoundViewFactory, ViewSlot, customAttribute, bindable, templateController} from 'aurelia-templating';
#customAttribute('with-parent')
#templateController
#inject(BoundViewFactory, ViewSlot)
export class WithParent {
constructor(viewFactory, viewSlot) {
this.viewFactory = viewFactory;
this.viewSlot = viewSlot;
}
bind(executionContext) {
this.executionContext = executionContext;
this.valueChanged(this.value);
}
valueChanged(newValue) {
if (!this.view) {
newValue.$parent = this.executionContext;
this.view = this.viewFactory.create(newValue);
this.viewSlot.add(this.view);
}
else {
this.view.bind(newValue);
}
}
}
and then usage is transparent:
<div with-parent.bind="data_1">
<span textcontent.one-time="id"></span>
<span textcontent.one-time="name"></span>
<div with-parent.bind="$parent.currency">
<span textcontent.one-time="name"></span>
<div with-parent.bind="$parent.$parent.another">
<span textcontent.one-time="name"></span>
</div>
</div>
</div>
Using $parent alongside with.bind now works as of aurelia-framework#1.1.5
For example, the following will add a view model reference (bar) to the parent rather than to foo
<element with.bind="foo">
<child-element view-model.ref="$parent.bar"></child-element>
</element>
$parent gives you a reference to your view model so $parent.currency