Conditional rendering is not working as expected in reactjs

Conditional rendering is not working as expected in reactjs - javascript

function Demo(props){
return(
<div>
{props.boolean && <div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && </div>}
</div>
)
}
ReactDOM.render(
<Demo boolean="true"/>, document.body
);
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
</head>
<body>
</body>
</html>
Here i want to get the form tag if the prop boolean value is true,but its not working as expected.
if i use code like this
{props.boolean && <div></div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && <div></div>}
it comes,So if opening and closing tags are together then its working.is there any way to get the values when the tags are apart...please help

You're trying to do something, that's somewhat of an anti-pattern. This might be a better solution:
function Demo(props) {
function MyContents() {
return (
<h1>
HI,many of these kind of dom elements will be here
</h1>
);
}
return (
<div>
{ props.boolean ?
<div><MyContents /></div>
:
<MyContents />
};
</div>
);
}
ReactDOM.render(
<Demo boolean="true" />, document.body
);

Please try Conditional Rendering
function Demo(props) {
const flag = props.flag;
return (
if (flag) {
return <h1 > true < /h1>;
}
return <h1 > false < /h1>;
)
}
ReactDOM.render(
<Demo flag={true}/>, document.getElementById('root')
);
HTML
<body>
<div id="root"></div>
</body>

A different and better way to do conditional rendering
function Demo(props) {
return (
<h1>{props.flag ? true : false}</h1>;
)
}
ReactDOM.render(
<Demo flag={true}/>, document.getElementById('root')
);

Related

Functional component after being called 5 times and wrapping in React.Fragment tag still not displaing anything

<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<Div id="asdfg"></Div>
</body>
<script type="text/babel">
function Dalo()
{ return (
<h1>bhj</h1>
)
}
function Panch ()
{
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
}
ReactDOM.render( <Panch/> , document.getElementById("asdfg") );
</script>
</html>
Here nothing is being rendered after calling function Panch.

The parenthesis after the return must be on the same line as the return itself. So change this:
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
to
return (
<React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)

I am having problem with my table showing up in the browser

I a creating a React App that keeps Score but so far my components are not showing up in the browser could anyone help? The Scoreboard should have a score counter so far and player name but so far nothing is appearing I am new to react.
I have tried linking babel in the HTML and This is the React Code
const Header = () =>
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>;
const Player = () => {
return(
<div className="player">
<span classNae="player-name">
Guil
</span>
<Counter />
</div>
);
}
const counter = () => {
return(
<div className="counter">
<button className="counter-decriiment">-</button>
<span className="counter-score"></span>
<button className="counter-incriment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/>
{/* { Players List } */}
<PLayer />
</div>
);
}
ReactDom.render(
<App />,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>

You are missing an element which has to have a root id to be render on.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="app.js"></script>
</body>
</html>
const Header = () => {
return(
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>
);
}
const Player = () => {
return( <div className="player">
<span className="player-name"> Guil </span><Counter />
</div>
);
}
const Counter = () => {
return( <div className="counter">
<button className="counter-decrement">-</button>
<span className="counter-score"></span>
<button className="counter-increment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/> { } <Player /> </div> ); }
ReactDOM.render( <App />, document.getElementById('root') );

React Input text now being shown

I'm trying to create a composed input text (joining 4 input components) but i'm not being able.
Everything seems to be OK and the only way I Have been able to show the input text is placing it in the render of the main React component (cardform). In the DOM explorer (chrome) the only componet I an empty cardNumberFullField
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
This is the JS:
class CardForm extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<cardNumberFullField />
</div>
)
}
}
function cardNumberFullField() {
return (
<div>
<cardNumberInputField inputName="0" />
<cardNumberInputField inputName="1" />
<cardNumberInputField inputName="2" />
<cardNumberInputField inputName="3" />
</div>
)
}
function cardNumberInputField(props) {
return (
<div>
<input id={props.inputName} name={props.inputName} type="text" />
</div>
)
}
// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"))

React custom components always needs to be in Capitalized. So cardNumberFullField should be CardNumberFullField, cardNumberInputField should be CardNumberInputField
Check Specifying The React Element Type.
The first part of a JSX tag determines the type of the React element.
Capitalized types indicate that the JSX tag is referring to a React
component. These tags get compiled into a direct reference to the
named variable, so if you use the JSX expression, Foo must be
in scope.
class CardForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<CardNumberFullField />
</div>
);
}
}
function CardNumberFullField() {
return (
<div>
<CardNumberInputField inputName="0" />
<CardNumberInputField inputName="1" />
<CardNumberInputField inputName="2" />
<CardNumberInputField inputName="3" />
</div>
);
}
function CardNumberInputField(props) {
return (
<div>
<input id={props.inputName} name={props.inputName} type="text" />
</div>
);
}
// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

React - How to pass props on click text to image

I have this simple app, where I'm looking for a solution to connect the click from the text to the image. Here, the click is not toggeable, just click once and the image is supposed to appear. First, I thought that would make sense to define a state for the image, but honestly I don't think is the best practice.
Which is the best solution for this kind of situation? I aprecciate any provided tips and solutions.
Thank you.
// IMAGE COMPONENT
class Image extends React.Component {
render() {
return (
<div>
<img
alt=""
src="https://media.makeameme.org/created/what-if-I-y0ivox.jpg"
/>
</div>
);
}
}
// TEXT COMPONENT
class Text extends React.Component {
imageClick() {
console.log('click');
}
render() {
return (
<div>
<p onClick={this.imageClick}>If you click me, Morpheus will appear!</p>
</div>
)
}
}
// PARENT COMPONENT
class App extends React.Component {
render () {
return (
<div>
<Text onClick={this.imageClick} />
<Image src={this.props.src} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

Use the parent component to set the visibility of the image.
// IMAGE COMPONENT
class Image extends React.Component {
render() {
return (
<div>
<img
alt=""
src="https://media.makeameme.org/created/what-if-I-y0ivox.jpg"
/>
</div>
);
}
}
// TEXT COMPONENT
class Text extends React.Component {
render() {
return (
<div>
<p onClick={() => this.props.onClick()}>If you click me, Morpheus will appear!</p>
</div>
)
}
}
// PARENT COMPONENT
class App extends React.Component {
state = {
visible : false,
}
toggleVisible = () => this.setState({ visible : !this.state.visible });
render () {
const { visible } = this.state;
return (
<div>
<Text onClick={this.toggleVisible} />
{
visible
&& <Image src={this.props.src} />
}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("#app"));

Style tag in return ()

I want to have a style tag in my react js code of return()
return(
<style> .mobile_view_svg_div{}
`#media(max-width:600px){`
`.mobile_view_svg_div`
`{`
width:300px;
`}`
`} `
</style>
<div>
<svg className="mobile_view_svg_div">
svg code here.
<svg>
</div>
)
when I compile this , I get error as
Syntax error: Unexpected token, expected }
Any help would be great.

You forgot to add the wrapping div on it. With that, such styling should work.
I just added a red background so you can actually see the styling in action ;)
class App extends React.Component {
render() {
return (
<div>
<style>{`
.mobile_view_svg_div {
background-color: red;
}
#media(max-width:600px) {
.mobile_view_svg_div {
width:300px;
}
}
`}</style>
<div>
<svg className="mobile_view_svg_div">
svg code here.
</svg>
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

You need to wrap the return in div, works fine for me.

Develop Reference

JavaScript is the programming language of the Web.

Conditional rendering is not working as expected in reactjs - javascript

Please try Conditional Rendering function Demo(props) { const flag = props.flag; return ( if (flag) { return <h1 > true < /h1>; } return <h1 > false < /h1>; ) } ReactDOM.render( <Demo flag={true}/>, document.getElementById('root') ); HTML <body> <div id="root"></div> </body>

A different and better way to do conditional rendering function Demo(props) { return ( <h1>{props.flag ? true : false}</h1>; ) } ReactDOM.render( <Demo flag={true}/>, document.getElementById('root') );

Related

Functional component after being called 5 times and wrapping in React.Fragment tag still not displaing anything

I am having problem with my table showing up in the browser

React Input text now being shown

React - How to pass props on click text to image

Style tag in return ()

Categories

Resources