Develop Reference

How to actively develop and debug single component feature in React library containing multiple component/features

I wonder, what is "the right way" to actively develop a single React library feature/component with hiding all other features that are not important for the actively developed feature.
What are my requirements:
do not wait for loading and rendering component which is not actively developed
do not see a not actively developed component
simply switch from active development of one component to another one
"My way" how I do it:
I am maintaining a React library that contains multiple components and features. This library is used in the final React application as a dependency. This project is actively developed and maintained for 5 few years.
When I am working on some feature request, I usually do not want to be disrupted with other features. I don't want to see them in the browser window, I don't want to wait for while they load and render. Hence, I prepared app.js file which usually renders all features (in a list, one component bellow another) from the library and when I am actively developing a single feature, I comment out all other features, like this:
app.js
// my react redux application entry point
// Now I am actively developing feature Discover files,
// so every other feature (Dashboard, Reports, Sparklines) is commented out
ReactDOM.render(
<Provider store={store}>
<!--
// using html comments here,
// just to properly highlight comments in this code block
// here in stackoverflow
<div>
<h1>Dashboard</h1>
<header style={{height: '650px', display: 'flex'}}>
<DashboardContainer
{/* some dashboard props */}
/>
</header>
</div>
<div>
<h1>Reports</h1>
<header style={{height: '650px', display: 'flex'}}>
<ReportsContainer
{/* some reports props */}
/>
</header>
</div>
-->
<div>
<h1>Discover files</h1>
<header style={{height: '350px', display: 'flex'}}>
<FilesContainer
{/* some files props */}
/>
</header>
<nav style={{height: '400px', display: 'flex'}}>
<FilteringContainer
{/* some filter props */}
/>
</nav>
</div>
<!--
<div style={{width: '300px', marginBottom: '10px'}}>
<h2>Sparklines:</h2>
<SparklinesChart
chartType={'bar'}
data={[{x: 1, y: 2}, {x: 2, y: 3}]}
/>
<br />
<SparklinesChart
chartType={'bar'}
data={[{x: -1, y: 25}, {x: 0, y: -5}]}
/>
</div>
-->
</Provider>
);
Is this "the right way" with regards to the price/value of the problem solution?
I thought about using Storybook as a solution, but I don't know if it is not an overkill solution for my requirements (as it is probably necessary to prepare separate webpack config for building storybook, configuring source watching properly, some boilerplate code for stories, ...).

React - Having trouble onClick (React)

((New to React))
I am trying to get the different jobs (salary.job.id listed above) to pass through on click. The jobs are already being obtained through an axios call.
Is there an easier way to accomplish this? Also, is it correct to call the this.makesalary twice (once in componentDidMount and another through the click?
This is what i am trying to pass through
makesalary(slug = "charlotte") {
axios.get(`https://api.teleport.org/api/urban_areas/slug:${slug}/salaries/`)
.then(results => {
console.log(results)
const filteredata = results.data.salaries.filter(salary=>{
if(salary.job.id === "UX-DESIGNER"){
return true
}
if (salary.job.id === "WEB-DEVELOPER"){
return true
}
if(salary.job.id === "MOBILE-DEVELOPER"){
return true
}
return false
})
this.setState({salaries:
filteredata
})
}
)
}
Can this be called twice? and is the placement correct?
componentDidMount (){
this.makesalary(this.props.slug)
}
_onclick(salary){
this.makesalary(salary.job.id)
}
Here is the render
<div>
<h2>What Tech Job are you in currently?</h2>
<CardGroup>
<Card>
<Card.Img variant="top" src= {Mobileicon} />
<Card.Body>
<Card.Title>Mobile Developer</Card.Title>
<Card.Text>
Mobile Developer specialise in mobile technology such as building apps for Google's Android, Apple's iOS and Microsoft's Windows Phone platforms.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" onClick={this._onclick}>Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
<Card>
<Card.Img variant="top" src= {UXicon} />
<Card.Body>
<Card.Title>UX Designer</Card.Title>
<Card.Text>
In a nutshell, the UX designer is responsible for how a product or website feels.
The UX designer's job is to zero in on users' underlying emotional and functional needs.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" >Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
<Card>
<Card.Img variant="top" src={Webdevelop} />
<Card.Body>
<Card.Title>Web Developer</Card.Title>
<Card.Text>
A Web Developer is responsible for the coding, design and layout of a website according to a company's specifications.
As the role takes into consideration user experience and function, a certain level of both graphic design and computer programming is necessary.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" >
Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
</CardGroup>
</div>
)
}

I'd like to help out so I'm going to point out a few things and also suggest a bit. Before starting, I have to apologize if something I say is incorrect and would appreciate it if someone would correct me on such.
I'm also going to assume that your makesalary function is defined above (where the Axios call is shown).
In your componentdidmount method, you call makesalary with the parameter you have obtained from props. If your props are valid, this is absolutely fine.
You also happen to call makesalary in the _onclick method. I'd suggest you rename it to something such as handleClick or onClickHandler to make it more clear, and remove the _ in front as it's unnecessary (unless it's a convention you are using). The method itself looks fine.
When you are calling _onclick with the button, keep in mind that it's going to pass an event into the method. You should handle this by either passing a function such as () => _onclick(salary) to onClick at the button (since you don't intend to use the event for anything). Aside from handling the event correctly, this also helps you to pass in the correct parameter for _onclick. In the code snippet you have provided, it seems that onClick is not passing any parameters to the _onclick function.
I'd recommend you to read up on the official React documentation regarding this:
https://reactjs.org/docs/handling-events.html.
Hope I've helped!
EDIT: In case you're wondering, it's absolutely okay to call the same method twice!

Updating child props value on parent props value change

guys! I'm building React Native component that contains a UI pattern. This UI pattern will contain several smaller reusable patterns. This way:
<ListItem onPress={}>
<IconContainer>
<Icon />
</IconContainer>
<Body>
<Text>Content</Text>
</Body>
<Right>
<Action onPress={} />
</Right>
<ListItem>
Now I'm also building embedding size variants (small, medium/default and large) for some of these children, like this for example:
<IconContainer large={boolean} small={boolean}>
<Icon />
</IconContainer>
And since the are several children, I don't want to have the person using the component to have to specify the size variant for each one of the children. That'll also require them to know which one of the children have size variants and which one doesn't.
So, what I'm trying to do is to embed a props.large and a props.small into the parent and use that to change de value of the same prop if available in the children.
Any ideas of how to do that in a simple way?
(I suspect this is easy but I've been struggling with this for a while so I thought I'd ask for some help.)
Thanks in advance!

Adding a geojsonlayer for react

I have some geojson data that I have created from a gtfs realtime feed, I am trying to add it to a mapbox map. My Map currently displays fine and I can get it to render markers, however I am having issues with rendering geojson data.
<div>
<Map
style="mapbox://styles/.../cjw2k3na404qn1csfznqo90z7"
containerStyle={{ width: '85vw', height: '90vh'}}
center={this.props.center}>
<GeoJSONLayer ...../>
</Map>
I do not know what should be entered in the <GeoJSONLayer /> tag which is being imported as import { GeoJSONLayer, ... , ... } from "react-mapbox-gl".

How to replace React-Leaflet Popup with custom component?

I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>

Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>