So, I want to use collection class inside react I tried the following way
class Collect extends React.Component {
constructor(props) {
super(props);
this.state = {
}
};
render() {
return (
<div class="collection">
<a href="#!" class="collection-item">Name
<span class="badge"> 3 </span></a>
</div>
);
}
}
It did not work in the expected materializecss way. What would have gone wrong?
Or is this an issue with materializecss on react.
You need to use className instead of class. Like:
return (
<div className="collection">
<a href="#!" className="collection-item">Name
<span className="badge"> 3 </span></a>
</div>
);
}
Look HTML Attributes documentation.
Related
This is a whitebox.jsx file where i have a state "wbimage", it should contain an image url that will be displayed in className="wbimgframe". I want to access and edit this state i.e, give image url to "wbimage" in another jsx file - javaa.jsx
whitebox.jsx
import "./whitebox.css"
class Whitebox extends Component {
constructor(props) {
super(props);
this.state ={
wbimage: '',
};
}
render() {
return (
<div>
<div className="wbdemo" >
<div className="wbimgframe">
<center>
<img src={this.state.wbimage} alt="Given image will be displayed here"/>
</center>
</div>
<div className="wbdemobookname">
<label>Book Name</label>
</div>
<div className="wbdemobookauthor">
<i><label>By </label>
<label>Book Author</label></i>
</div>
</div>
</div>);
}
}
export default Whitebox;
I have tried this, but still nothing is displayed in image.
javaa.jsx
import Whitebox from "./whitebox";
import "./javaa.css";
class Javaa extends Component {
render() {
return (
<div>
<br/><br/><br/><br/><br/>
<div className="javaamp">
<Whitebox>
{this.props.wbimage} = "https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg"
</Whitebox>
</div>
</div>);
}
}
export default Javaa;
Please help, I am a beginner. So if this question seems easy, please don't mind :)
parent component (From where you have to send the data)
<Whitebox wbimage="https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg">
Child component (from where you are gonna receive the data and use it in your HTML.
console.log(this.props.wbimage)
Check out this to understand better https://reactjs.org/docs/components-and-props.html
I want to call WOW when a ReactJS Component has loaded
The WOW Javascript is referenced at the bottom of the HTML on the inital HTML load.
the Javascript way to initiate is
new WOW().init();
and I thought it would be good to call this on "componentDidMount()"
my component code is:
import * as React from 'react';
class Banner extends React.Component {
componentDidMount() {
new WOW().init(); //This does not work "[ts] Cannot find name "WOW"
}
shouldComponentUpdate() {
return false;
}
render() {
return (
<div className="banner-section">
<div className="an-home-img-container banner-1">
<div className="overlay"></div>
<div className="home-banner-content text-center">
<div className="container">
<h1 className="wow fadeInDown animate hidden">
Some <span>Text</span> Here
</h1>
<button className="an-btn an-btn-default btn-big wow fadeIn hidden">Expole Us</button>
</div>
</div>
</div>
</div >
)
} }
export default Banner;
How can I call a JS function that isn't imported?
You can declare the variable before using it:
declare var WOW: any;
class Banner extends React.Component {
componentDidMount() {
new WOW().init();
}
// ...
}
Note that this will type WOW as any so you will lose type checking. If you need type checking you can declare WOW with a type instead of any:
interface WOW {
init: () => void
}
interface WOWConstructor {
new(): WOW
}
declare var WOW: WOWConstructor;
class Banner extends React.Component {
componentDidMount() {
new WOW().init();
}
// ...
}
i have a toolbar component and 3 options to add text, image and video element to main page component, i write a click handle in main page component and pass this event handler to toolbar component.
my simple idea is that a switch with a parameter that define the type of element but i don't know how to render them.
how can i do this?
class ToolbarContainer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div id="toolbarSection">
<div class="option" onClick={this.props.handleActionsClick("image")}>new Image</div>
<div class="option" onClick={this.props.handleActionsClick("text")}>new Text</div>
<div class="option" onClick={this.props.handleActionsClick("shape")}>new Shape</div>
</div>
);
}
}
class Page extends React.Component {
constructor(props) {
super(props);
}
handleActionsClick(type){
switch(type){
case "image":
//How can i render the <img/>?
case "text":
case "video":
}
}
render() {
return ();
}
}
Use createElement instead, which is what JSX uses under the hood.
You can then pass in a custom component to the click handler or a string for the native elements like 'img'.
I am using stateless component here but you can also just use classes if you need.
const ToolBarContainer = ({ handleActionsClick }) => (
<div id="toolbarSection">
<div class="option" onClick={handleActionsClick('img')}>new Image</div>
<div class="option" onClick={handleActionsClick(Text)}>new Text</div>
<div class="option" onClick={handleActionsClick(Shape)}>new Shape</div>
</div>
);
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleActionsClick = this.handleActionsClick.bind(this);
}
handleActionsClick(type){
this.setState({ type });
}
render() {
return React.createElement(this.state.type);
}
}
I am having difficulties implementing a piece of React code that fetches and renders information from localStorage.
I have a gallery of thumbnail pictures (components) that upon a click, trigger a function that fetches information from a db for that particular picture and stores the data in localStorage. It also redirects the user to the ShowTale component where I display information about the picture.
class Tale extends Component {
handleClick(){
const pictureId = this.props._id;
this.props.fetchTale(pictureId);
}
render() {
const {_id, title, story, picture} = this.props;
return (
<div className="col-md-2 col-sm-6">
<div className="thumbnail">
<img src={picture} />
<div className="caption">
<h4>{title}</h4>
</div>
<p>
<Link onClick={this.handleClick.bind(this)} to="showTale" className="btn btn-primary">More Info</Link>
</p>
</div>
</div>
)
}
};
export default connect(null, actions)(Tale);
I set the data via the following action:
export function fetchTale(id){
return function(dispatch){
axios.get(`${ROOT_URL}/tale`, {params: {id: id}}).then(function(response) {
localStorage.setItem('fishTail', JSON.stringify(response.data));
})
}
};
The problem lies in that the ShowTale component, below, does not render the correct data. It renders the correct data on the first instance upon starting the application, but on subsequent requests, it renders the previous data. For example: I'll start the app, click on picture 1 renders 1, click on picture 2 renders 1, click on picture 3 renders 2, and so on. The data on localStorage is being correctly updates, but it appears the component is grabbing the data from localStorage before it is updated by the action.
class ShowTale extends Component {
constructor(props){
super(props)
this.state = {tale: JSON.parse(localStorage.getItem('fishTail'))}
}
componentWillMount(){
this.setState = JSON.parse(localStorage.getItem('fishTail'));
}
renderTale(){
const tale = this.state.tale;
console.log('the tale: ', tale);
const {title, story, picture, author} = tale;
return (
<div className="thumbnail">
<img className="image-responsive" src={picture}/>
<div className="caption-full">
<h4>{title}</h4>
<p>{story}</p>
<p><em>Submitted by: {author}</em></p>
</div>
</div>
)
}
render() {
return(
<div className="container showTale">
<div className="row">
<div className="col-sm-12">
{this.renderTale()}
</div>
</div>
</div>
)
}
};
export default ShowTale;
Any assistance with getting the pictures to show in sync with the data in localStorage will be greatly appreciated!
I'm using JSX so this may look weird to you.
You could put all the elements that need to change, in the state of your parent. Then the child component will be dumb, and just handle the content as it changes from the Tale parent component example:
class Tale extends Component {
// Parent Tale component handles fetching and setting state.
constructor(props){
super(props)
this.state = {
title:'',
story:'',
picture: Null,
author: ''
}
}
componentWillMount(){
this.fetch_info()
}
fetch_info(){
newObj = JSON.parse(localStorage.getItem('fishTail'))
setState({
title: newObj.title,
story: newObj.story,
picture: newObj.picture,
author: newObj.title
});
}
render() {
return(
<div className="container showTale">
<div className="row">
<div className="col-sm-12">
<ShowTale
title={this.state.title}
story={this.state.story}
picture={this.state.picture}
author={this.state.author} />
</div>
</div>
</div>
)
}
};
class ShowTale extends Component {
// Child ShowTale receives Props.
constructor(props){
super(props)
}
render(){
<div className="thumbnail">
<img className="image-responsive" src={this.props.picture}/>
<div className="caption-full">
<h4>{this.props.title}</h4>
<p>{this.props.story}</p>
<p><em>Submitted by: {this.props.author}</em></p>
</div>
</div>
}
export default ShowTale;
If this doesn't work, look at passing in a function to setState. Here is an example from the documentation.
Hope this example helps -- sorry it is in JSX!
I am quite new to react but I am trying to pass element from the Course component to my Coursebox component. I am doing this successfully but the button is being displayed since I am not passing that with this.prompt. I would like to remove the div id="course" from the HTML because I only want the course component to be displayed within the couresebox component.
This is my JSX code
class Course extends React.Component {
render() {
return (
<div className="course">
<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
<button>Start exercise</button>
</div>
);
}
}
ReactDOM.render( < Course />, document.getElementById('course'));
class Coursebox extends React.Component {
render() {
return (
<div>
<Course coursename="Negotiation" progress= "20%" status="Progress"/>
<Course coursename="Frontend" progress="56%" status="Progress"/>
<Course coursename="Food" status="Progress" progress="43%"/>
</div>
);
}
}
ReactDOM.render( < Coursebox />, document.getElementById('coursebox'));
and HTML
<header id="header">
</header>
<h3 id="search"></h3>
<div id="coursebox"></div>
<div id="course"></div>
When I remove the nothing is being displayed on the page apart from the header. Since I am passing the element from Course to the Coursebox component, shouldn't I be able to remove the course div from the HTML?
If it is still needed, why is that?
Is there a way for me to only display the button when a course name is being passed?
Thanks :)
Avoid rendering the course component. Ideally there should be just one render method and all other components should be called from that component. So render on CourseBox component only.
class Course extends React.Component {
render() {
console.log("hey")
return (
<div className="course">
<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
<button>Start exercise</button>
</div>
);
}
}
class Coursebox extends React.Component {
render() {
return (
<div>
<Course coursename="Negotiation" progress= "20%" status="Progress"/>
<Course coursename="Frontend" progress="56%" status="Progress"/>
<Course coursename="Food" status="Progress" progress="43%"/>
</div>
);
}
}
React.render(<Coursebox />, document.getElementById('coursebox'));
Working JS fiddle http://jsfiddle.net/kmbw9wgt/3/
1.) See this line
ReactDOM.render( < Course />, document.getElementById('course'));
You are explicitly asking react to render Course in a div which has id 'course'.
If you remove this, it will not render separately, but only from within Coursebox element.
Then you can safely remove that div.
2.) Yes, you can only show button when course name is passed. Using If condition ternary operator. Add your button in following way:
<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
{ this.props.coursename ? (<button>Start exercise</button>): null}