Develop Reference

Unable to extend react component in styled-component

I am trying to extent react component in styled-component and trying to add custom style on extended component but unable to see the style changes that I am applying
I have created a button component in /src/newbutton.js with following code
import styled from "styled-components";
const Button = styled.button`
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
export const NewButton = ({ className, children }) => {
return (
<Button primary>Primary</Button>
)
}
And extending and creating another button component with custom style in /src/custom-button.js with following code
import styled from "styled-components";
import { NewButton } from './button'
const ButtonWrapper = styled(NewButton)`
width: 100%;
color: red
`;
const ExtendedButton = ({ className, children }) => {
return (
<ButtonWrapper />
)
}
I have added the custom style like width: 100% & color: red but it is not applying on ExtendedButton. Infect colour and width is same as NewButton

You need to pass a className to your NewButton in order to customize it, using styled-components.
Styled components works by creating a unique className that associated with a component and its CSS.
export const NewButton = ({ className, children }) => {
return (
<Button className={className} primary>Primary</Button>
)
}

I am posting the complete working code for future reference based on #Flat Globe solution. And it is working fine as expected.
I have modified the Button component code just by adding className in /src/newbutton.js with following code
import styled from "styled-components";
const Button = styled.button`
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
export const NewButton = ({ className, children }) => {
return (
<Button primary className={className}>Primary</Button>
)
}
I have also modified the extended-button code by just passing the className in /src/custom-button.js. check the full code below
import styled from "styled-components";
import { NewButton } from './button'
const ButtonWrapper = styled(NewButton)`
width: 100%;
color: red
`;
const ExtendedButton = ({ className, children }) => {
return (
<ButtonWrapper className="extended-button"/>
)
}

Passing Props in SolidJS

I came across something weird while trying to pass props in SolidJS. I've created a store using createStore which I pass through the component tree using Context.Provider. I also have the helper function useStore which lets me access the store anywhere in the component tree (I'm experimenting with React design patterns in SolidJS). I have two components Anime.jsx (parent) and EpisodeList.jsx (child). I'm fetching data when the Anime component mounts and then populate the store with the setter provided by createStore.After which I pass the fetched data to EpisodeList. However, accessing the props of EpisodeList returns an empty proxy (Not sure why, but I think the EpisodeList component isn't re-rendered when store is updated with store.currentAnimeData). I've attached the output below of the console.log statements below.
Any help regarding this would be highly appreciated.
###################################
# Anime.jsx (Parent component)
###################################
const Anime = (props) => {
const [store, setStore] = useStore();
const getAnimeData = async () => {
const currentAnimeId = store.currentAnime.animeId;
const currentAnimeData = await firebase.getAnimeData(currentAnimeId);
setStore(
produce((store) => {
store.currentAnimeData = currentAnimeData;
})
);
};
onMount(() => {
getAnimeData();
});
return (
<>
<div
className={css`
width: 100%;
min-height: 20px;
margin: 8px 0px 5px 0px;
padding: 0px 10px;
box-sizing: border-box;
font-size: 20px;
word-wrap: break-word;
line-height: 1;
`}
>
<span
className={css`
font-size: 20px;
color: #e32451;
`}
>
{"Watching: "}
</span>
{store.currentAnime.name}
</div>
<Search></Search>
<EpisodeList animeData={store.currentAnimeData.episodes} />
</>
);
};
#####################################
# EpisodeList.jsx (child component)
#####################################
const EpisodeList = (props) => {
console.log(props);
console.log(props.animeData);
...... # UI stuff
return (
<div
className={css`
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding-bottom: 5px;
margin-top: 10px;
`}
>
<ScrollActionUp onmousedown={[scroll, true]} onmouseup={onmouseup}>
➭
</ScrollActionUp>
<div
className={css`
width: 100%;
height: 432px;
box-sizing: border-box;
padding: 10px 10px 0px 10px;
overflow: hidden;
`}
ref={scrollRef}
>
<For each={animeData.episodes}>
{(episode, index) => {
return (
<Episode status={episode.watched} episode={episode}></Episode>
);
}}
</For>
</div>
<ScrollActionDown onmousedown={[scroll, false]} onmouseup={onmouseup}>
➭
</ScrollActionDown>
</div>
);
};
###############
# store.jsx
###############
import { createContext, createSignal, useContext } from "solid-js";
import { createStore } from "solid-js/store";
const StoreContext = createContext();
export function ContextProvider(props) {
const [store, setStore] = createStore({});
return (
<StoreContext.Provider value={[store, setStore]}>
{props.children}
</StoreContext.Provider>
);
}
export function useStore() {
return useContext(StoreContext);
}

Toggle state taking previous value in react?

I am trying to create a to-do list app. The basic functionality includes adding and deleting. So when a user selects one or multiple items, a delete button will appear and it will be deleted. My problem is I am implementing a toggle state which when a user clicks on todo item, it will be strikethrough( A strikethrough text decoration will be added via CSS).
The problem arises when I add two items. When I click on the first item , it gets a strike through and when I delete it, the first one goes but the second item gets the strike through this time.
The running sample in codesandbox. Just try adding two items and delete the first one. The second one also gets a strike through.
I believe its because the toggle state value is being remembered.
This is the Content.js component
import "./styles/content.css";
import Individual from "./Individual";
import { useEffect, useState } from "react";
import { updateItem, markIncomplete } from "./action/action";
const Contents = (props) => {
const items = useSelector((state) => state.todoReducer.items);
const dispatch = useDispatch();
const handleClick = (e, isComplete, content, id) => {
// console.log(isComplete);
if (isComplete === false) {
//evaluates false to true
const newobj = {
isComplete: true,
content,
id
};
dispatch(updateItem(newobj));
props.deletebutton(true);
} else {
const falseobj = {
isComplete: false,
content,
id
};
dispatch(markIncomplete(falseobj));
}
};
useEffect(() => {
console.log("statechanging of contents");
});
return (
<div className="content-ui">
<div>
{items.map((vals) => (
<Individual
vals={vals}
deletebutton={props.deletebutton}
handleClick={handleClick}
/>
))}
</div>
</div>
);
};
export default Contents;
This is the individual.js which deals with toggle function
import { useDispatch, useSelector } from "react-redux";
import "./styles/content.css";
import { updateItem, markIncomplete } from "./action/action";
const Individual = (props) => {
console.log("child" + props.vals.isComplete);
const [toggle, isToggled] = useState(false);
const handleToggle = () => {
const mytoggle = !toggle;
isToggled(mytoggle);
};
return (
<div>
<div
className={toggle ? "toggled" : "card-elements"}
onMouseDown={handleToggle}
onClick={(e) => {
props.handleClick(
e,
props.vals.isComplete,
props.vals.content,
props.vals.id
);
handleToggle;
}}
>
{props.vals.content}
</div>
</div>
);
};
export default Individual;
Css of toggler
.toggled {
/* border: 1px solid rgb(94, 94, 94); */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
text-align: left;
box-sizing: border-box;
padding: 10px 3px 10px 7px;
margin-top: 4px;
margin-bottom: 8px;
border-radius: 5px;
background-color: white;
font-size: 12px;
font-family: "Roboto ", monospace;
text-decoration: line-through;
}
.card-elements {
/* border: 1px solid rgb(94, 94, 94); */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
text-align: left;
box-sizing: border-box;
padding: 10px 3px 10px 7px;
margin-top: 4px;
margin-bottom: 8px;
border-radius: 5px;
background-color: white;
font-size: 12px;
font-family: "Roboto ", monospace;
}

You need to add keys to your mapped items (there should also be a warning about this in the console).
Keys help React identify which items have changed, are added, or are removed.
As is stated from React's documents.
return (
<div className="content-ui">
<div>
{items.map((vals) => (
<Individual
key={vals.id} // <-- add unique key
vals={vals}
deletebutton={props.deletebutton}
handleClick={handleClick}
/>
))}
</div>
</div>
);

My component re-render after i try to search for an element in a useState array

I am currently building a React project, so I made a search Input and when I type something in that Input field my hole component re-renders causing an API recall and deleting the text in my Input. I tried merging both the search component with Home component and the same problem appears.
I want my component to call the api only one time, and I am trying to filter the response depending on the input type.
please help!!
Here is my Home component:
import { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import CountryThumb from '../Components/CountryThumb';
import ThemeContext from '../Components/ColorPalette';
import { Themes } from '../Components/ColorPalette';
import Search from '../Components/Search';
import Filter from '../Components/Filter';
const Grid = styled.main`
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 60px;
row-gap: 40px;
#media (max-width: 375px) {
grid-template-columns: repeat(1, 1fr);
}
`;
export default function Home() {
const [Countries, setCountries] = useState([]);
const [SearchTerms, setSearchTerms] = useState('');
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
useEffect(() => {
getCountries();
}, []);
const Main = styled.main`
display: flex;
flex-wrap: wrap;
padding: 20px 100px;
background-color: ${Theme == 'light' ? style.background : style.background};
#media (max-width: 375px) {
padding: 40px 25px;
}
`;
const getCountries = () => {
axios
.get('https://restcountries.eu/rest/v2/all')
.then((res) => setCountries(res.data))
.catch((err) => console.log(err));
};
return (
<>
<Main>
<Search handleSearch={(e) => setSearchTerms(e.target.value)} />
<Filter />
<Grid>
{Countries.slice(0, 12)
.filter((e) => {
if (SearchTerms == '') {
return e;
} else if (
e.name.toLowerCase().includes(SearchTerms.toLowerCase())
) {
return e;
}
})
.map((e) => (
<CountryThumb props={e} />
))}
</Grid>
</Main>
</>
);
}
And here is my Search component:
import { useContext, useState } from 'react';
import styled from 'styled-components';
import ThemeContext, { Themes } from './ColorPalette';
function Search({ handleSearch }) {
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
const Svg = styled.svg`
width: 24px;
height: 24px;
color: ${style.text};
`;
const Wrapper = styled.div`
background-color: ${style.element};
border-radius: 5px;
box-shadow: 0 5px 10px ${style.shadow};
display: flex;
align-items: center;
padding: 0 20px;
margin: 40px 0;
`;
const CInput = styled.input`
border: none;
outline: none;
padding: 15px 120px 15px 20px;
font-size: 1rem;
color: ${style.text};
background: none;
`;
return (
<>
<Wrapper>
<Svg
xmlns='http://www.w3.org/2000/svg'
class='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
/>
</Svg>
<CInput
type='text'
name='Search'
onInput={handleSearch}
placeholder='Search for a country ...'
/>
</Wrapper>
</>
);
}
export default Search;

Whenever you change anything in state your component will rerender so it is normal behaviour. However you have dependency array in useEffect that calls api so this function should run only one time, maybe you didnt have array before and forgot to save.

How to achieve tag agnostic styled components?

If I want a button but, only the presentational part of that, so if I do:
import styled from 'styled-components'
const Button = styled.button`
color: red;
text-align: center;
`
I'm forced to render a button tag, but what about if semantically I need an anchor?

Use the "as" polymorphic prop in v4
copy/pasta from the example in the docs:
const Component = styled.div`
color: red;
`;
render(
<Component
as="button"
onClick={() => alert('It works!')}
>
Hello World!
</Component>
)

styled-components provides withComponent that'll be useful for cases where you want to use an a different tag with a component. This is similar to #siddharthkp's answer in function, but uses the API.
Example from the documentation:
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// We're replacing the <button> tag with an <a> tag, but reuse all the same styles
const Link = Button.withComponent('a')
// Use .withComponent together with .extend to both change the tag and use additional styles
const TomatoLink = Link.extend`
color: tomato;
border-color: tomato;
`;
render(
<div>
<Button>Normal Button</Button>
<Link>Normal Link</Link>
<TomatoLink>Tomato Link</TomatoLink>
</div>
);

You can use it with a anchor tag as well, there's nothing stopping you.
import styled from 'styled-components'
const Button = styled.a`
color: red;
text-align: center;
`
If you want to keep both, you can reuse the styles by pulling them out:
import styled from 'styled-components'
const styles = `
color: red;
text-align: center;
`
const Button = styled.button`
${styles}
`
const LinkButton = styled.a`
${styles}
`

I've asked the same question on styled-components issue tracker: https://github.com/styled-components/styled-components/issues/494
And the current "solution" that I've found is:
// agnosticStyled.js
import React from 'react'
import styled from 'styled-components'
export default styled(
({tag = 'div', children, ...props}) =>
React.createElement(tag, props, children)
)
And then when you need it:
import React from 'react'
import styled from './agnosticStyled'
const Button = styled`
color: palevioletred;
text-transform: uppercase;
`
export default Button
And finally:
import React from 'react'
import Button from './Button'
const Component = () =>
<div>
<Button>button</Button>
<Button tag="button">button</Button>
<Button tag="a" href="https://google.com">button</Button>
</div>
export default Component
Here a full functioning example: https://codesandbox.io/s/6881pjMLQ

Since we're just using JavaScript, why not use a function?
const myButtonStyle = (styled, tag) => {
return styled[tag]`
color: red;
text-align: center;
`
}
const Button = myButtonStyle(styled, 'button')

As #typeoneerror pointed out, styled-components provides WithComponent. You can use this to to create a new component based on a prop containing the tag. Piggybacking off the example, it would look like this:
const _Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const Button = ({ as: tag = 'button', children, ...props }) => {
// We're replacing the <button> tag with whatever tag is assigned to the 'as' prop (renamed to 'tag' and defaulted to button), but reuse all the same styles
const Composed = _Button.withComponent(tag);
// We return the newly-created component with all its props and children
return <Composed {...props}>{children}</Composed>;
};
render(
<div>
<Button>Normal Button</Button>
<Button as='a'>Normal Link</Button>
</div>
);
<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>