I am beginner in reactjs, I want to copy a color when I click on color.
How should it be done?
import React from 'react';
const Green = ()=>{
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
<div className='div-style' id='color31'> #2ECC72 </div>
<div className='div-style' id='color32'> #26AE60 </div>
<div className='div-style' id='color33'> #6AB04A </div>
<div className='div-style' id='color34'> #43BE31 </div>
<div className='div-style' id='color35'> #10A881 </div>
<div className='div-style' id='color36'> #019031 </div>
<div className='div-style' id='color37'> #75DA8B </div>
<div className='div-style' id='color38'> #218F76 </div>
<div className='div-style' id='color39'> #218F76 </div>
<div className='div-style' id='color40'> #7CEC9F </div>
</div>
</div>
)
}
export default Green;
You can use navigator.clipboard.writeText() to copy text to the clipboard.
I would recommend using an object of colors, then with Object.entries() and map() create the <div>s and add an onClick() to trigger it:
const Green = () => {
const colors = {
color31: '#2ECC72',
color32: '#26AE60',
color33: '#6AB04A',
color34: '#43BE31',
color35: '#10A881',
color36: '#019031',
color37: '#75DA8B',
color38: '#218F76',
color39: '#218F76',
color40: '#7CEC9F',
};
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
{Object.entries(colors).map(([id, color]) =>
<div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
)}
</div>
</div>
);
}
export default Green;
Related
I want to build a Carousel in Sitecore NextJs. I found a carousel package to do so, but it hardcodes the number of slides. Since the author will create the slides dynamically in Sitecore, my NextJs component should be smart enough to detect the number of "child slides" added to the Carousel and render them accordingly.
This is the example I found online:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default class NextJsCarousel extends Component {
render() {
return (
<div>
<h2>NextJs Carousel - GeeksforGeeks</h2>
<Carousel>
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
<div>
<img src="/2.png" alt="image2" />
<p className="legend">Image 2</p>
</div>
<div>
<img src="/3.png" alt="image3"/>
<p className="legend">Image 3</p>
</div>
<div>
<img src="/4.png" alt="image4"/>
<p className="legend">Image 4</p>
</div>
<div>
<img src="/5.png" alt="image5"/>
<p className="legend">Image 5</p>
</div>
</Carousel>
</div>
);
}
};
Instead, I want the Slides within the Carousel to be dynamic and use a loop based on how many slides are added under my Carousel component in Sitecore.
I am using react-slick for my carousels you may follow something similar approach as i did for your react-responsive-carousel.
My Slider Component:
export const MainSlider: FC<SliderProps> = ({
settings,
data,
type,
className,
}) => {
if (!(data.length > 0)) return null;
return (
<Fragment>
<div className="mian-slider">
<div className="container cus-container">
<div className="main-sec-slider">
<div className="img-box-back" />
<SlickSlider {...settings} className={className}>
{data.map((value, index) => {
return (
<div key={index}>
{type === "main-carousel"
? InnerSlider.Main(value)
: InnerSlider.Article(value)}
</div>
);
})}
</SlickSlider>
</div>
</div>
</div>
</Fragment>
);
};
Inside map function you can pass another component as i did with name InnerSlider which contains html code for your carousel images.
In your case you need to pass this:
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
at last pass props data for MainSlider component :
<MainSlider
settings={settings}
data={[YOUR_SLIDER_DATA_ARRAY]}
type="main-carousel"
className="slider-main-text"
/>
I am new at react and I can understand the difference between React.Component and a function.
In these two pictures I have the same HTML and the same CSS but my CSS is done in the javascript file. When I use the CSS in a function, it works, but in a react component it does not.
Component
render() {
const classes = useStyles();
return (
<div style={section}>
<div style={container}>
<div>
<div style={title}>
<h1>TEste</h1>
</div>
</div>
</div>
</div>
)
}
Function
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<div>
<div className={classes.title}>
<h1>1</h1>
</div>
</div>
</div>
</div>
);
I am pulling data from an api and mapping over the JSON array to display the results, how do I use bootstrap grid to make the elements show one beside another instead of like a list?
//App.js
<div>
<FileHeader/>
{this.state.films.map(film=>(
<div className="container">
<div key={film.id} id='cardItem' className=''>
<MovieCard film={film}/>
</div>
</div>
))}
</div>
And this is the MovieCard Component
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
How do I use the grid element to display the cards side by side?
You should only have 1 container for your items, so get it out of the map(), then insert a row in which you'll inject the card elements. You'll have to decide how much items you want on each row. In the example below you'll have 12 items per row as a row is made of 12 columns and col-xs-1 means each item will take 1 column in the row.
You can decide it per each screen size using col-xs, col-sm etc...
<div className="container">
<div className="row">
{this.state.films.map(film => (
<div key={film.id} id="cardItem" className="col-xs-1">
<MovieCard film={film} />
</div>
))}
</div>
</div>
Please try this....
<div className="container">
<div className='row'>
<FileHeader/>
{this.state.films.map(film=>(
<div key={film.id} id='cardItem' className="col-sm-3"><MovieCard film={film}/>
</div>
))}
</div>
</div>
Moviecard component...
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
I am trying to successfully express Semantic-UI code with the same functions I have used in Semantic-UI-react code. Any help would be appreciated.
This is what I have:
class Preview extends React.Component {
componentDidMount() {
const update = () => {
this.dest.textContent = this.src.innerHTML.replace(/</g,
'\n<');
};
setInterval(update, 300);
update();
}
render() {
return (
<div>
<div ref={(src) => Object.assign(this, { src })}>
<Demo />
</div>
<pre ref={(dest) => Object.assign(this, { dest })}>
</pre>
</div>
)
}
}
export class Demo extends Component { constructor(){
super();
this.localStorageClear.bind(this); }
localStorageClear = (e) => {
e.preventDefault();
window.localStorage.clear();
};
render() {
return (
<div id = "soundcloud-player">
<Container className='col'>
<div className='col-left js-playlist toggle'>
<div className='inner'>
</div>
</div>
<div className='col-right'>
<div className = 'main'>
<Input size='massive' icon='search' input = {{ className:
'input-search js-search' }} placeholder='Search for a song
or artist...'/>
<Icon className='js-submit'/>
<Button onClick={(e) => this.localStorageClear(e)}
className='clear' content='Clear Playlist'/>
<Button content='Show/Hide Playlist' id='toggle'
className='hide-toggle'/>
<Card className='js-search-results search-results'/>
</div>
</div>
</Container>
</div>
The code written in the Preview Component is specifically written to convert the code written inside of the Demo Component. The Demo Component should convert to what is shown below:
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input">
<input placeholder="Search for a song or artist..." class="js-search input-search">
<i class="search icon js-submit"></i>
</div>
<button onclick="localStorageClear();" class="clear">Clear Playlist</button>
<button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>
<div class="search-results js-search-results ui cards">
</div>
</div>
</div>
The actual output of the code at the top is:
<div id="soundcloud-player">
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input input-search">
<input placeholder="Search for a song or artist..." type="text">
<i aria-hidden="true" class="search icon">
</i>
</div>
<i aria-hidden="true" class="icon js-submit">
</i>
<button class="ui button clear" role="button">Clear Playlist
</button>
<button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
</button>
<div class="ui card js-search-results search-results">
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out why the localStorageClear function does not show up for the first button in the actual output. Is there wrong I am doing at the top inside of the Semantic-UI-React code inside of the Demo Component?
The way you are setting up your handler function is not correct. You are also binding in your constructor AND inline with an arrow function inside of the onClick event for the button. You only need to bind in one place.
Take a look at the codesandbox example I made so you can see how to declare a class method handler function and use it with a click event. Notice that there is no constructor here or arrow function to bind on the onClick event? That is because the binding is happening on the class method. handleClick = () => {}
class App extends React.Component {
handleClick = e => {
console.log(e.target + " was clicked.");
// Do whatever functionality you need here.
// In your example you do not show that it matters what the element is,
// so you don't need to pass the event (e) into your class method.
};
render() {
return (
<Container>
<Divider hidden />
<Button content="Click Me" onClick={this.handleClick} />
<Divider hidden clearing />
<Message info>
Look in your console and you will see that the click function is
working.
</Message>
</Container>
);
}
}
Here is a working codesandbox example.
I'm trying to use Semantic.ui's dropdown in my Meteor.js + React.js app. Everything else with Semantic.ui works fine, but I can't make the dropdown menu work. Here's my code:
NavigationMain = React.createClass({
componentDidMount() {
$('.ui.dropdown.right').dropdown();
},
componentDidUpdate() {
$('.ui.dropdown.right').dropdown('refresh');
},
_openChat(){
console.log("click");
},
render(){
return (
<div className="ui top attached menu">
<div className="ui dropdown icon item" onClick={this._openChat}>
<i className="comments outline icon"></i>
</div>
<div className="ui dropdown right icon item">
<i className="wrench icon"></i>
<div className="menu">
<div className="item">
<i className="dropdown icon"></i>
<span className="text">New</span>
<div className="menu">
<div className="item">Document</div>
<div className="item">Image</div>
</div>
</div>
<div className="item">
Open...
</div>
<div className="item">
Save...
</div>
<div className="item">Edit Permissions</div>
<div className="divider"></div>
<div className="header">
Export
</div>
<div className="item">
Share...
</div>
</div>
</div>
</div>
);
}
});
I have also tried using Reacts ref attribute to reference the element like this:
$(this.refs.menu).dropdown();
But it doesn't seem to help either.
All the examples I've found, for example the Semantic.ui's official integration doc (http://semantic-ui.com/introduction/integrations.html), work like this and I've made it work before without React. That's why I'm starting to feel helpless.
Any help with this would be appreciated.
Works for me.
var Content = React.createClass({
componentDidMount: function() {
$('.ui.dropdown').dropdown()
},
render: function () {
return <div className="ui dropdown">
<div className="text">File</div>
<i className="dropdown icon" />
<div className="menu">
<div className="item">New</div>
<div className="item">
<span className="description">ctrl + o</span>
Open...
</div>
<div className="item">
<span className="description">ctrl + s</span>
Save as...
</div>
<div className="item">
<span className="description">ctrl + r</span>
Rename
</div>
<div className="item">Make a copy</div>
<div className="item">
<i className="folder icon" />
Move to folder
</div>
<div className="item">
<i className="trash icon" />
Move to trash
</div>
<div className="divider"></div>
<div className="item">Download As...</div>
<div className="item">
<i className="dropdown icon" />
Publish To Web
<div className="menu">
<div className="item">Google Docs</div>
<div className="item">Google Drive</div>
<div className="item">Dropbox</div>
<div className="item">Adobe Creative Cloud</div>
<div className="item">Private FTP</div>
<div className="item">Another Service...</div>
</div>
</div>
<div className="item">E-mail Collaborators</div>
</div>
</div>
}
});
ReactDOM.render(
<Content />,
document.getElementById('container')
);
Here is a fiddle
https://jsfiddle.net/85z7o3n2/