I'm trying to add Laravel existing conditional statement on ReactJs component
I've tried to add it on render function.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export class Login extends Component {
render() {
return (
<div class="login">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
/*-- Register
#if (Route::has('register'))
#endif */
#endauth
</div>
#endif
</div>
);
}
}
if (document.getElementById('login')) {
ReactDOM.render(<Login />, document.getElementById('login'));
}
<div id="login"> </div>
require('./components/Welcome');
I'm trying to display the existing laravel script from react components.
Thanks in advance for the help.
#if use by blade template which output is <?php if(condition) ?>
you can try this
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export class Login extends Component {
render() {
return (
<div class="login">
<div class="top-right links">
if (isLoggedIn) {
Home
} else {
Login
}
</div>
</div>
);
}
}
if (document.getElementById('login')) {
ReactDOM.render(<Login />, document.getElementById('login'));
}
isLoggedIn is coming from state of react where should true when user is logged in
Related
I keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
One component Landing.js has following code::
import React, { Component } from 'react'
import NewsSearch from '../NewsSearch/NewsSearch';
import NewsLatest from '../NewsLatest/NewsLatest';
import './Landing.css';
import axios from 'axios';
class Landing extends Component {
state={
newsList: []
}
componentDidMount(){
axios.get(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=7cK9FpOnC3zgoboP2CPGR3FcznEaYCJv`)
.then(res=> {
this.setState({newsList: res.data.results});
});
}
render() {
// console.log(this.state.newsList);
return (
<div className="landing text-center text-white">
<h1>News Portal</h1>
<div className="news-search">
<NewsSearch />
</div>
<div className="news-latest">
<NewsLatest newsList={this.state.newsList}/>
</div>
</div>
)
}
}
export default Landing;
When sending props to NewsLatest component, 2 values are getting passed: first as undefined and then when value comes then an array with the values.
In the "NewsLatest.js" file code is :::
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle}
</div>
);
}
}
export default NewsLatest;
Nothing is rendering on the UI. I dont know how to handle that. Kindly suggest something.
The issue you are facing is that you are not rendering anything (per se) cos newsTitle does not return anything.
In your code, newsTitle is an object but you need to make it a function.
Modifying NewsLatest should fix this though
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = () => (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle()}
</div>
);
}
}
export default NewsLatest;
I am learning react-router and trying to display a list of courses and course detail. But now, the CourseDetail2 component page does not display. Help!
App.js
`
import React, { Component } from 'react';
import axios from 'axios';
import CourseList2 from './components/CourseList2'
//campus data
const campusData = [
{ id: 1, value:'A',name: 'A' },
{ id: 2, value:'B',name: 'B' },
{ id: 3, value:'C',name: 'C' }
]
class App extends Component {
state={campus:null,
Courses:[]}
componentDidMount(){
//api call
setState={Courses:response.data}
}
//event handler
handleCampusChkChange()=>{
//code
}
render() {
return (
<div className="App">
<Campus key={item.id} {...item} onChange={this.handleCampusChkChange} />
<CourseList2 courses={this.state.Courses}/>
</div>
);
}
}
export default App;
`
CourseList2.js
import React from 'react';
import CourseDetail2 from './CourseDetail2';
import {BrowserRouter as Router, Route, Link,Redirect} from 'react-router-dom';
import './CourseItem.css';
import App from './App';
const CourseList2=({Courses})=>{
console.log("coruses="+Courses);
const renderedList= Courses.map(course=>{
return (<div className="item" >
<div class="content">
<div class="header">
<h4>
{course.SUBJECT} {course.CATALOG} {course.DESCR}
</h4> </div>
<Link to={{ pathname: 'course/'+course.ID}}
key={course.ID}>
View More
</Link>
</div>
</div>
)
});
return (
<Router><div className="List ui relaxed divided list">
{renderedList}
<Route path="course/:course.ID" component={CourseDetail2} />
</div></Router>);
}
export default CourseList2
CourseDetail2.js
import React, { Component } from 'react';
class CourseDetail2 extends Component {
render(){
return (
<div>
Course Detail: CLASS ID {this.props.match.params.ID}
</div>
);
}
};
export default CourseDetail2;
Adding as answer instead of comment.
Probably want to pass this.state.Courses to CourseList2, and wrap CourseDetails2 with withRouter HOC from react-router-dom so it can access the route match prop.
Also, the path in the route in CourseList2 should probably be path="course/:ID" since that is how you access it on the details.
location, match and history objects can only be accessed when you wrap the component with the higher order component withRouter.
Right now you don't have access to this.props.match in CourseDetail2 component.
import React, { Component } from 'react';
import {withRouter} from 'react-router';
class CourseDetail2 extends Component {
render(){
return (
<div>
Course Detail: CLASS ID {this.props.match.params.courseID}
</div>
);
}
};
export default withRouter(CourseDetail2);
Also the string after : doesn't have match with the code. It can be anything.
<Route path="course/:courseID" component={CourseDetail2} />
And you access using that string name in your code.
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.
I'm trying to render a graphviz graph from a dotfile in my React Component. I keep running into errors I don't understand. If anyone could shed some light I would be grateful.
import React from 'react';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
class Visualization extends React.Component {
setGraph() {
console.log('DOT source =', dotSrc);
const dotSrcLines = dotSrc.split('\n');
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render(){
return (
<div className="graph">
{this.setGraph}
</div>
)
}
}
export default Visualization;
I've also tried:
import React, { Component } from 'react';
import { render } from 'react-dom';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import HTMLReactParser from 'react-html-parser';
const graph = Viz({ files: [ { path: dotSrc } ] });
class Visualization extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<div>
{HTMLReactParser(graph)}
</div>
</div>
);
}
}
render(<Visualization />, document.getElementById('root'));
To no avail. Neither Viz nor GraphViz wants to read my dotfile though I'm not sure I'm using the correct syntax either.
Thank you in advance.
It's not exactly clear what you want to do and what errors you are getting.
This code at least generates a graph from a static string when the button is clicked:
import React, { Component } from 'react';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
var dotSrc = 'digraph {a -> b}';
class App extends Component {
setGraph() {
console.log('DOT source =', dotSrc);
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to magjac's React hack</h1>
</header>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<div className="graph">
</div>
<button className="square" onClick={() => this.setGraph()}>
{'Click me'}
</button>
</div>
);
}
}
export default App;