Get value of children data-attribute (React) Ask Question

I have a select menu with a list of options. Each options has a data attribute.

<select onChange={this.handleSelectChange}>
  <option data-tag="red">Value1</option>
  <option data-tag="blue">Value2</option>
  <option data-tag="green">Value3</option>
</select>

I can access the value of the current selected option with:

handleSelectChange(e) {
  let inputValue = e.target.value;
}

But i also need the data-tag attribute of the current selected option.
How do i go about getting that?

Background image with react js – not displaying full screen Ask Question

I’m used to react native and trying my hand at reactjs, however I’m getting really frustrated with myself as I understand a lot of how react works from using react native but I can’t style my components properly as I’m not used to css.

I’m using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.

I’m currently trying this but it doesn’t work.

<div className="background">
</div>

//In App.css

.background {
  background-image: url('./assets/main-image.jpg');
  background-size: 'contain';
  width: 100%;
  height: auto;
}

I’ve tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.

My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.

Can someone point me in the right direction?

Thanks

Edit: I’ve now set my css background class to this and it’s nearly there.

  background-image: url('./assets/main-image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;

The only issue is now I’m left with a decent size of padding below the image due to it rendering the full height of my view port

Child component need to be called after parent get mounted with its styles in Aphrodite/Reactjs Ask Question

I have a structure where my Parent Component (Layout)(Presentational Component) will render the DOM which has a child component (Fitme) which will get the scroll height and client to check whether the child is overflowing or not, and reduce/increase the font size.

As React doc says, Parent did mount will be called after all child. So my fitme component gets executed before parent do the paint. It makes child to not work as expected.

Requirement: As I want the Child to be plug-able, i dont want to pass any property in props from parent to notify the child about the mount state.

Edited: Please find the sandbox link.
For the First time (after load), it will not be fitting the text. but if you change the dom, so that it will rerender the component. it will work.

https://codesandbox.io/s/k2051pwl83

Update: I guess this is the issue with the plugin i am using to apply css in js way (aphrodite). not sure about it, but i have raise a ticket in git. and code is update in the sandbox.

Thanks in Advance,

How to make only one API request when using React SSR? Ask Question

My application has to make an API call, that returns an array of items that gets styled and rendered to the screen. To make my SSR rendering work, I have to make the API request on server of course, but when using the SSR you also have to rerender (using ReactDOM.hydrate) on the client and I’m making the 2nd API request in here.

Since the API request takes more than 2 seconds, doing it 2 times is so inefficient. Is there a workaround around that by only doing 1 request and someway using the data on both server and client?

React.js – this.props.children an object when spreading the result of a .map from the parent Ask Question

I am having some strange behaviour where this.props.children is converting to an object when I spread the result of a .map() from the parent.

example:

const items = [
  { id: 1, name: "Name1" },
  { id: 2, name: "Name2" }
].map((item) => {
  return (
    <DropdownMenu_listItem key={item.id} item={item} />
  );
});

render() {
  return (
    <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {...items}
    </DropdownMenu>
  );
}

// DropdownMenu.js

render() {
  console.log(this.props.children); // {0: {…}, 1: {…}}

  return (
    // ...
  );
}

The weird part is that when I omit the .map() and pass the elements directly, they appear in this.props.children as an array like expected:

render() {
  return (
    <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      <DropdownMenu_listItem item={{...}} />
      <DropdownMenu_listItem item={{...}} />
    </DropdownMenu>
  );
}

// DropdownMenu.js

render() {
  console.log(this.props.children); // [{…}, {…}]

  return (
    // ...
  );
}

Any insight into why this is happening would be greatly appreciated.

How to use common dependencies in different clojurescript projects? Ask Question

I wrote a clojurescript project. It is a reagent component. Now i want to use this component in other clojurescript project. That is what i do: I compiled my cljs project and then i put a result compiled file to js folder in other project. Further i require that file from index.html. At the end i invoke my component from cljs file

(.slider-view (.-views js/swipe) (clj->js [[:p "1"]
                                           [:p "2"]
                                           [:p "3"]]))

and it works. But i have a question. My project and project where i connect my component have common requirements. For example React and ReactDOM. How to exclude this two references from my project and then connect it from another project? Is there alternative approaches? For example require cljs namespace from another cljs project directly

React Native borderRadius one corner not round Ask Question

Hello this is the code I’m using:

  menuItemButtonContainer: {
    marginRight: 1,
    marginLeft: 1,
    marginTop: 1,
    marginBottom: 1,
    paddingRight: 1,
    paddingLeft: 1,
    paddingTop: 1,
    paddingBottom: 1,
    borderRadius: 10,
    overflow: 'hidden',
    position: "absolute",
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: colors.navy
  },

but for some reason the top right corner is not round. I’ve been cudgeling my brain for a day.

This is the component code

<Native.View
          style={[styles.menuItemButtonContainer, {width: 50, height: 30, marginLeft: 0}]}><Native.TouchableHighlight
          underlayColor={colors.darkGray}
          onPress={this.orderObjectChange.bind(this, 'ADD', item.id)}
          style={{
            justifyContent: 'center',
            alignItems: 'center'
          }}><Native.View><Components.Text
          style={{color: colors.navy}}>ADD</Components.Text></Native.View></Native.TouchableHighlight></Native.View>

enter image description here

Recharts custom dot Ask Question

I have an StackedAreaChart and after I show areas on graph I want to add a custom dot.

Currently my code look like this but I want to draw a dot depend on XAxis and YAxis data. Does exist any way to pass x and y coordinates to a CustomizedDot class?

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Label, Dot } from 'recharts';

const data = [
    { name: 142, underweight: 36.3, normal: 11.3, overweight: 6.8, obese: 56.7 },
    { name: 196, underweight: 70.3, normal: 22.7, overweight: 15.9, obese: 2.2 },
];

class CustomizedDot extends React.Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <circle cx={160} cy={50} r={25} stroke="black" strokeWidth={3} fill="red" />
        );
    }
};

class BMIGraph extends React.Component {
    render() {
        return (
            <div>
                <h2>Index telesne mase za odrasle</h2>
                <AreaChart width={600} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                    <XAxis dataKey="name">
                        <Label value="Višina (cm)" offset={0} position="insideBottom" />
                    </XAxis>
                    <YAxis>
                        <Label value="Teža (kg)" angle={-90} position="insideLeft" textAnchor="middle" />
                    </YAxis>
                    <CartesianGrid strokeDasharray="3 3" />
                    {/* <Tooltip /> */}
                    <CustomizedDot />
                    <Area type='monotone' dataKey='underweight' stackId="1" stroke='#8884d8' fill='#7d7dff' animationDuration={3500} name="Podhranjenost" dot={<CustomizedDot />} />
                    <Area type='monotone' dataKey='normal' stackId="1" stroke='#82ca9d' fill='#7dff7d' animationDuration={3500} name="Normalna teža" />
                    <Area type='monotone' dataKey='overweight' stackId="1" stroke='#ffc658' fill='#ffff7d' animationDuration={3500} name="Prekomerna teža" />
                    <Area type='monotone' dataKey='obese' stackId="1" stroke='#ffc658' fill='#ff7d7d' animationDuration={3500} name="Debelost" />
                </AreaChart>
            </div>
        );
    }
}

export default BMIGraph;

The result of the current code

Navigating with react-router v4 Ask Question

I am trying to build an app and learning react as the frontend framework. I recently been introduced to react-router and getting to grips with v4. I had great difficulty creating a simple app that has 3 pages – Base, Page1 and Page2 all just showing the navbar and the name of the page as a header.

I achieved this and have this working on my local server. The main page loads and when I click a link on the header I am brought to the correct page. My issue is when I manually type in the url I get a 404 response and I don’t understand why.

Here is my work so far;

Main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Routes from './Routes.jsx';

ReactDOM.render((
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    ), document.getElementById('main')
);

Routes.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import Pages from './components/Pages.jsx';
import Navigation from './components/Header.jsx';

const Routes = () => (
    <div>
        <Navigation />
        <Pages />
    </div>
);

export default Routes;

Header.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import CreateReactClass from 'create-react-class';

const Navigation = () => (
  <nav>
    <ul>
      <li><NavLink to='/'>Home</NavLink></li>
      <li><NavLink to='/page1'>Page1</NavLink></li>
      <li><NavLink to='/page2'>Page2</NavLink></li>
    </ul>
  </nav>
);

export default Navigation;

Pages.jsx

import React from 'react';
import CreateReactClass from 'create-react-class';
import { Route, Switch } from 'react-router-dom';
import Base from './Base.jsx';
import Page1 from './Page1.jsx';
import Page2 from './Page2.jsx';

const Pages = () => (
    <Switch>
        <Route exact path="/" component={Base} />
        <Route exact path="/page1" component={Page1} />
        <Route exact path="/page2" component={Page2} />
    </Switch>
);

export default Pages;

Base.jsx (Page1.jsx & Page2.jsx are the same with h1 values changed)

import React from 'react';
import CreateReactClass from 'create-react-class';

const Base = CreateReactClass({
    render: function(){
        return(
            <div>
                <h1>Base</h1>
            </div>
        );
    }
});

export default Base;

package.json

{
  "name": "react-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "watchify src/main.jsx -v -t [ babelify --presets [ react env ] ] -o public/js/main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ddold/react-skeleton.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ddold/react-skeleton/issues"
  },
  "homepage": "https://github.com/ddold/react-skeleton#readme",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "create-react-class": "^15.6.3",
    "history": "^4.7.2",
    "http-server": "^0.11.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.2.2",
    "watchify": "^3.11.0",
    "webpack": "^4.1.1"
  }
}

I compile and run the code using the npm start command, which is taken from the start script in the packages.json file. I use http-server to run the frontend server that allows me to route between the pages

Can anyone shed any light as to why I can navigate to other pages via the navbar but not by the URL?