191
rated 0 times
[
195]
[
4]
/ answers: 1 / hits: 18662
/ 6 Years ago, tue, january 30, 2018, 12:00:00
I am using ReactJs. I have two Components,PrescriptionIndex and PrescriptionNew, integrating one with another.
This is my first component 'PrescriptionNew'
import React, { Component } from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
class PrescriptionNew extends Component {
render(){
return(
<div>
<MuiThemeProvider>
<FloatingActionButton mini={true} style={{color: pink}}>
<ContentAdd/>
</FloatingActionButton>
</MuiThemeProvider>
</div>
)
}
}
export default PrescriptionNew;This is my another Component PrescriptionIndex
import React , { Component } from 'react';
import { connect } from react-redux;
import { fetchPrescriptionFromUrl } from '../actions/index.js';
import { Link } from 'react-router';
import PrescriptionNew from './new.jsx';
import '../app.css';
class PrescriptionIndex extends Component {
componentDidMount(){
this.props.fetchData(PORT+'/prescriptions');
}
render() {
if (this.props.has_error){
return(<p> Fetching an Api results in error</p>)
}
if (this.props.has_loading){
return(<p> Loading...</p>)
}
if (this.props.prescriptions.prescriptions !== undefined) {
return this.props.prescriptions.prescriptions.map(function(data){
return (
<div className=image-prescription key={data.id}>
<Link to={/update/ + data.id} >
<img src={data.image_path.image_path.url}
className=prescription-image
alt=prescription
/>
</Link>
</div>
);
});
} else {
return null;
}
return(
<div>
<PrescriptionNew /> //this is where I need my another component
</div>
)
}
}
export default PrescriptionIndex;On Running, the PrescriptionNew component is not visible. On examing the console, warning is stated as Unreachable code. I have gone through other solutions, but I cannot able to study whats going wrong in my code.
More From » reactjs
