Support
Quality
Security
License
Reuse
kandi has reviewed AstroBox and discovered the below as its top functions. This is intended to give you an instant insight into AstroBox implemented functionality, and help decide if they suit your requirements.
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
AstroBox allows you to control your 3D Printer wirelessly
QUESTION
How to check and return value of state object array and use that to identify which object to take data from
Asked 2021-Sep-22 at 15:50The Aim: Use the value of i.id
from the mapped components when clicked on to search state ids
and locate the object which contains the same id
value... When this object is found to return/update id
and active
values.
Clicking on the dynamic rendered component triggering onClick
to change value of the current active: true
to active: false
and find object with id
of the clicked component and this.setState({active:value})
in that object.
Then if (active === true)
render iframe containing the object's id
value.
The state
this.state = {
ids: [
{
id: "iCBvfW08jlo",
active: true,
},
{
id: "qvOcCQXZVg0",
active: false,
},
{
id: "YXNC3GKmjgk",
active: false,
},
],
};
The components rendered for each state
{this.state.ids.map((i) => (
<Image
className="carouselitem"
rounded
fluid
src={
"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"
}
size="small"
/>
))}
I am Really Stumped for what to do
I tried an if
loop inside a for ...in...
loop... but gave me nothing but errors when trying to render the page.
Full Code
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Button, Embed, Icon, Image, List } from "semantic-ui-react";
import "./Services.css";
import logo from "./images/EIB 3D Logo v25.png";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import ReactPlayer from "react-player";
import MediaQuery from "react-responsive";
export default class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
ids: [
{
id: "iCBvfW08jlo",
active: true,
},
{
id: "qvOcCQXZVg0",
active: false,
},
{
id: "YXNC3GKmjgk",
active: false,
},
],
};
}
handleClick = (props) => {};
render() {
return (
<div className="serviceswrap">
<div className="servicesbdrop">
<div className="primarywrap">
<div className="primaryvideo">
<div className="carousel">
<div className="slider">
{this.state.ids.map((i) => (
<Image
className="carouselitem"
rounded
fluid
src={
"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"
}
size="small"
/>
))}
</div>
</div>
</div>
<List size="big" className="servicesList">
<List.Item>
<List.Icon size="big" name="cog" />
<List.Content>
<List.Header as="a">3D Printing</List.Header>
<List.Description>
Print your design using our 3d-printer.
</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon size="big" name="cog" />
<List.Content>
<List.Header as="a">CNC Machining</List.Header>
<List.Description>
Print your design using our CNC machienery.
</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon size="big" name="cog" />
<List.Content>
<List.Header as="a">Personalised Designs</List.Header>
<List.Description>
Design your idea to suite your needs.
</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon size="big" name="cog" />
<List.Content>
<List.Header as="a">Laser Etching</List.Header>
<List.Description>
Elegant designs etched onto wood.
</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon size="big" name="cog" />
<List.Content>
<List.Header as="a">Wood Working</List.Header>
<List.Description>
Build custom designed indoor and outdoor wooden signage.
</List.Description>
</List.Content>
</List.Item>
</List>
</div>
</div>
</div>
);
}
}
ANSWER
Answered 2021-Sep-18 at 14:01You can have a button
inside each mapped component as follows.
{
this.state.ids.map((i) => (
<>
<Image
className="carouselitem"
rounded
fluid
src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
size="small"
/>
<button onClick={() => this.changeActiveField(id)}>Change Activation</button>
</>
));
}
Then create changeActiveField
method inside the class component for active
field change in relevant object.
changeActiveField = (id) => {
this.setState({
ids: this.state.ids.map((obj) =>
obj.id === id ? { ...obj, active: false } : obj
),
});
};
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
See Similar Libraries in
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source