We Keep Coding

How to dynamically change style on conditionally rendered element in Svelte

Testing out SvelteKit 1.0 with a basic todo app but I'm unable to make the text strikethrough conditionally. When the user clicks the checkbox on the left of the TodoItem the text should change style to become strikethrough. I logged out the values for completed and textDecoration whenever they change and so I'm fairly confident the data is being passed correctly, the style just isn't changing for some reason.
I tried following the example laid out in the docs here as closely as possible but it's still not working. Here is the code
+page.svelte (Home)
<script lang="ts">
import SearchBar from '$components/SearchBar.svelte';
import TodoItem from '$components/TodoItem.svelte';
let todos = [
{
id: 0,
text: 'first task',
completed: false
}
];
const addTodos = (taskText: string) => {
if (!taskText) return;
todos = [
...todos,
{
id: todos.length,
text: taskText,
completed: false
}
];
console.log(todos);
};
const checkTodo = (id: number) => {
todos[id].completed = !todos[id].completed;
};
</script>
<h1>to-do app</h1>
<SearchBar onAdd={(str) => addTodos(str)} />
{#each todos as todo}
<TodoItem
text={todo.text}
bind:completed={todo.completed}
onCheck={() => checkTodo(todo.id)}
onDelete={() => console.log(`Delete ` + todo.id)}
/>
{/each}
TodoItem.svelte
<script lang="ts">
export let text: string;
export let onDelete: () => void;
export let onCheck: () => void;
export let completed: boolean;
$: textDecoration = completed ? 'line-through' : 'none';
//console log when value changes
$: textDecoration, console.log(textDecoration);
$: completed, console.log(completed);
</script>
{#if text}
<div class="todoContainer">
<input
on:click={() => {
onCheck();
}}
id={`todo-checkbox-` + text}
type="checkbox"
/>
<div style:textDecoration style:textAlign="left">
{text}
</div>
<div on:click={onDelete} on:keypress={onDelete}>x</div>
</div>
{/if}
<style>
.todoContainer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
border: 1px solid black;
border-radius: 5px;
margin: 10px 0;
}
</style>

Use dash instead of camelCase with the style:directive (an example seems to be missing in the docs and tutorial)
style:text-decoration={textDecoration}

event.target in undefined in React <input> component

I am using React. I am trying to dynamically add and remove input fields. I am trying to make a list of objects like
[
{"item": 1, "key": "RAM", "value": "8GB"},
{"item": 1, "key": "Color", "value": "Black"},
{"item": 1, "key": "Used For", "value": "6 months"},
]
There can be any number of objects in the above list. I want to send a post request with the above data. The problem I am facing is creating the above pattern. I want to create an Add button which will show two input fields for the key and value side by side. Then I want to add them to the above list when the user enters the values. Don't worry about the item because it is always the same.Here is a CodeSandBox link. Please expand the browser tab in CodeSandBox to see the full page.
I have done the following:
App.js
import React, { useState } from "react";
import {
SpecificationFormContainer,
SpecificationFormCard,
SpecificationFormTitle,
SpecificationInputRow,
SpecificationValue,
AddMoreButton,
RemoveButton
} from "./Elements";
import "./styles.css";
export default function App() {
const [numberOfSpecFields, setNumberOfSpecFields] = useState(0);
const [specificationKeys, setSpecificationKeys] = useState("");
const [specificationValues, setSpecificationValues] = useState("");
const [specifications, setSpecifications] = useState([]);
const handleSpecKeyChange = (event) => {
setSpecificationKeys(event.target.value);
};
const handleSpecValueChange = (event) => {
setSpecificationValues(event.target.value);
};
const handleFocusOut = (event, index) => {
console.log(event);
if (event.target.value === "") {
console.log("String Empty");
return;
}
};
return (
<SpecificationFormContainer>
<SpecificationFormCard>
<SpecificationFormTitle>Add Specifications</SpecificationFormTitle>
<form>
{[...Array(numberOfSpecFields)].map((e, index) => {
return (
<SpecificationInputRow key={index}>
<SpecificationValue
placeholder="Key"
onChange={handleSpecKeyChange}
name="key"
onBlur={() => {
handleFocusOut(index);
}}
/>
<SpecificationValue
placeholder="Value"
onChange={handleSpecValueChange}
name="value"
onBlur={() => {
handleFocusOut(index);
}}
/>
</SpecificationInputRow>
);
})}
</form>
<AddMoreButton
onClick={() => {
setNumberOfSpecFields((prev) => prev + 1);
}}
>
Add
</AddMoreButton>
{numberOfSpecFields > 0 && (
<RemoveButton
onClick={() => {
setNumberOfSpecFields((prev) => prev - 1);
}}
>
Remove
</RemoveButton>
)}
</SpecificationFormCard>
</SpecificationFormContainer>
);
}
Elements.js
import styled from "styled-components";
export const SpecificationFormContainer = styled.div`
width: 100%;
border: 2px solid blue;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
`;
export const SpecificationFormCard = styled.div`
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* min-height: 15em; */
min-width: 50em;
`;
export const SpecificationFormTitle = styled.div`
width: 100%;
font-size: large;
text-align: center;
`;
export const SpecificationInputRow = styled.div`
width: 100%;
display: flex;
justify-content: center;
`;
export const SpecificationValue = styled.input`
width: 40%;
padding: 0.5em;
margin: 0.5em;
`;
export const AddMoreButton = styled.button`
width: 7em;
`;
export const RemoveButton = styled.button`
width: 7em;
`;
In the handleFocusOut function, the event is 0. I was thinking of making an object with the key value pair in the handleFocusOut function based on the index as the key and value input pair have the same index.
I want to know why this does not work and how to make it work. There is most likely a better way to do this as this approach probably is not the best since I am only just a beginner. So, if there is a better way to achieve this, I want to know that.

In the handleFocusOut function, the event is 0.
It's 0 because you are passing index as an argument and ignoring the event. You could use a curried function to accept the event and index as well.
const handleFocusOut = (index) => (event) => {
// do stuff
};
onBlur={handleFocusOut(index)}
or add a function directly in JSX:
onBlur={(event) => handleFocusOut(event, index)}

radio group buttons using ant design dont work

I am experiencing some issues with radio group buttons. Can someone help me with this issue. (your help is much appreciated)
Current Issue: Radio Group are not clickable. Im not sure where I missed up!
Technologies Used: React hooks, styled-components , and design
for the radio buttons.
RadioGroup.js
import React from "react";
import { Radio } from "antd";
import styled from "styled-components";
import { theme } from "constants/theme";
const { royalBlue, black } = theme.colors;
const { medium } = theme.typography.size;
const { display } = theme.typography.font.family;
const StyledRadioGroup = styled(Radio.Group)`
width: 100%;
margin-top: 0.5rem;
text-align: left;
.ant-radio-wrapper {
justify-content: space-between;
padding: ${(props) => props.padding};
white-space: break-spaces;
margin-left: -1.5rem;
span.ant-radio + * {
font-family: ${display};
font-size: ${medium};
color: ${black};
letter-spacing: 0;
}
.ant-radio-inner {
border-color: ${royalBlue};
border-width: 0.2rem;
width: 2.5rem;
height: 2.5rem;
&::after {
background-color: ${royalBlue};
top: 0.2rem;
left: 0.2rem;
}
}
}
`;
const RadioGroup = ({
options,
onChange,
value,
defaultValue,
flex,
padding,
}) => {
return (
<StyledRadioGroup
size="large"
flex={flex}
padding={padding}
onChange={onChange}
value={value}
defaultValue={defaultValue}
>
{options.map((option, index) => (
<Radio value={option.stateKey} key={index}>
{option.value}
</Radio>
))}
</StyledRadioGroup>
);
};
export default RadioGroup;
Navigation.js
import React, { useState, useReducer } from "react";
import styled from "styled-components";
import RadioModal from "components/Feedback/RadioModal";
import RadioGroup from "components/Feedback/RadioGroup";
const renderRadioModal = () => {
const inputLabelsText = [
{
stateKey: "age",
label: "What is your age?",
},
];
const radioButtonOptions = [
{
stateKey: "covidImpact",
value: "I go to work/school normally",
},
{
stateKey: "covidImpact",
value: "I am healthy but in a stay-at-home quarantine",
},
{
stateKey: "covidImpact",
value: "I have mild symptoms but haven't been tested",
},
{
stateKey: "covidImpact",
value: "I am diagnosed with Covid-19",
},
];
const RadioGroupWithLabel = withLabel(() => (
<RadioGroup
onChange={true}
options={radioButtonOptions}
value={true}
padding="1rem 1rem"
size="large"
></RadioGroup>
));
return (
<RadioModal
maskClosable={true}
closable={true}
visible={radioModal}
onClose={() => closeRadioModal()}
transparent
>
<h2 className="title">We are almost done!</h2>
{inputLabelsText.map((label, index) => (
<>
<StyledInput
key={index}
label={label.label}
value={label.stateKey}
onChange={dispatchAction}
></StyledInput>
<RadioGroupWithLabel label={"How has COVID-19 impacted you?"} />
</>
))}
<FeedbackSubmitButton
title="Submit Feedback"
onClick={closeRadioModal}
></FeedbackSubmitButton>
</RadioModal>
);
};

You have onChange={true} and value={true}. You need to handle the onChange and value properly. The value prop needs to match the value in your options that you pass into the radio group.
The options you pass in should be in the structure [{ value, label }, { value, label }]
Then in your onChange you need to handle setting that value + have a place to store it

how can i display round dot for active status in react

In older code of react it just display the text active or in active for an user. Now I want to replace it to red or green small dot how can I do it.

CSS
div .colored-circle {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -2px;
border-radius: 50%;
border-style: solid;
border-width: 0.5px;
border-color: black;
height: 20px;
width: 20px;
}
Component:
const ColoredCircle = ({ color }) => {
const styles = { backgroundColor: color };
return color ? (
<Fragment>
<span className="colored-circle" style={styles} />
</Fragment>
) : null;
};
export default ColoredCircle;

Use the same logic you used to show 'active' or 'inactive' and instead of text add a div with css or img of the desired color.

If you happen to use material UI, you can do like this:
import React, { Fragment } from "react";
import { makeStyles } from "#material-ui/core";
const RADIUS_DOT = 1.5;
const useStyles = makeStyles((theme) => ({
circle: {
borderRadius: RADIUS_DOT,
height: RADIUS_DOT * 2,
width: RADIUS_DOT * 2,
padding: 0,
},
}));
const ColoredCircle = ({ color }) => {
const styles = { backgroundColor: color };
const classes = useStyles();
return color ? (
<Fragment>
<span className={classes.circle} style={styles} />
</Fragment>
) : null;
};
export default ColoredCircle;

you can use this package, can be helpful
npm i react-color-circle
import Circle from '#uiw/react-color-circle';
return (
<Circle
colors={[ '#F44E3B' ]}
/>);

Reactjs - using draft.js as a form text field - how to initialize and retrieve content

I am building a reactjs application.
I've created a variant of the RichEditor - which uses draft.js -- I am unsure though how to set content for this editor and also how to retrieve it if it were to be made part of a form.
here is my current code base
So if I were to treat it as a field.
const initialValues = {editor: "I am a <h2>bit</h2> of dummy <b>html</b> text"}
<RichEditor initialValues={initialValues} />
^ so something like this - but also how would I obtain the contents if it were part of like a react-redux form?
like this?
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import renderField from '../_SharedFormComponents/renderField'
import validate from './validateComplaint'
import warn from './warnComplaint'
const ComplaintSyncValidationForm= props => {
const { handleSubmit, pristine, reset, submitting } = props
const initialValues = {editor: "I am a <h2>bit</h2> of dummy <b>html</b> text"}
return (
<form onSubmit={handleSubmit}>
<Field name="email" type="email" component={renderField} label="Email" />
<RichEditor initialValues={initialValues} />
<div>
<button type="submit" disabled={submitting}>
Complain
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
export default reduxForm({
form: 'syncValidationComplaint', // a unique identifier for this form
validate, // <--- validation function given to redux-form
warn // <--- warning function given to redux-form
})(ComplaintSyncValidationForm)
//RichEditor.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import './RichEditor.scss';
class RichEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => this.setState({editorState});
this.handleKeyCommand = this._handleKeyCommand.bind(this);
this.onTab = this._onTab.bind(this);
this.toggleBlockType = this._toggleBlockType.bind(this);
this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
}
_handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
_onTab(e) {
const maxDepth = 4;
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
}
_toggleBlockType(blockType) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
blockType
)
);
}
_toggleInlineStyle(inlineStyle) {
this.onChange(
RichUtils.toggleInlineStyle(
this.state.editorState,
inlineStyle
)
);
}
render() {
const {editorState} = this.state;
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' RichEditor-hidePlaceholder';
}
}
return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={editorState}
onToggle={this.toggleBlockType}
/>
<InlineStyleControls
editorState={editorState}
onToggle={this.toggleInlineStyle}
/>
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
onTab={this.onTab}
placeholder="Tell a story..."
ref="editor"
spellCheck={true}
/>
</div>
</div>
);
}
}
// Custom overrides for "code" style.
const styleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2,
},
};
function getBlockStyle(block) {
switch (block.getType()) {
case 'blockquote': return 'RichEditor-blockquote';
default: return null;
}
}
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'RichEditor-styleButton';
if (this.props.active) {
className += ' RichEditor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
const BLOCK_TYPES = [
{label: 'H1', style: 'header-one'},
{label: 'H2', style: 'header-two'},
{label: 'H3', style: 'header-three'},/*
{label: 'H4', style: 'header-four'},
{label: 'H5', style: 'header-five'},
{label: 'H6', style: 'header-six'},
{label: 'Blockquote', style: 'blockquote'},
{label: 'UL', style: 'unordered-list-item'},
{label: 'OL', style: 'ordered-list-item'},
{label: 'Code Block', style: 'code-block'},*/
];
const BlockStyleControls = (props) => {
const {editorState} = props;
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="RichEditor-controls">
{BLOCK_TYPES.map((type) =>
<StyleButton
key={type.label}
active={type.style === blockType}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
var INLINE_STYLES = [
{label: 'Bold', style: 'BOLD'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'},
//{label: 'Monospace', style: 'CODE'},
];
const InlineStyleControls = (props) => {
var currentStyle = props.editorState.getCurrentInlineStyle();
return (
<div className="RichEditor-controls">
{INLINE_STYLES.map(type =>
<StyleButton
key={type.label}
active={currentStyle.has(type.style)}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
export default RichEditor
and the scss for it.
//RichEditor.scss
#import '../../colors.scss';
.RichEditor-root {
background: $white;
border: 1px solid $stone-grey;
font-family: 'Georgia', serif;
font-size: 14px;
padding: 15px;
}
.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
display: none;
}
.RichEditor-controls {
font-family: 'Helvetica', sans-serif;
font-size: 14px;
margin-bottom: 5px;
user-select: none;
}
.RichEditor-styleButton {
color: $grey;
cursor: pointer;
margin-right: 16px;
padding: 2px 0;
display: inline-block;
}
.RichEditor-activeButton {
color: $light-blue;
}
.RichEditor-editor {
border-top: 1px solid $grey;
color: black;
cursor: text;
font-size: 16px;
margin-top: 10px;
.RichEditor-blockquote {
border-left: 5px solid $stone-grey;
color: #666;
font-family: 'Hoefler Text', 'Georgia', serif;
font-style: italic;
margin: 16px 0;
padding: 10px 20px;
}
.public-DraftStyleDefault-pre {
background-color: rgba(0, 0, 0, 0.05);
font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
font-size: 16px;
padding: 20px;
}
.public-DraftEditorPlaceholder-root,
.public-DraftEditor-content {
margin: 0 -15px -15px;
padding: 15px;
}
.public-DraftEditor-content {
min-height: 100px;
}
h2{
color: $black!important;
}
}

I made the richtexteditor part of a react-redux component. It updates a hidden field on keyups.. it has to change the value instead of setting the state - this was to fool the react-redux form that the field had been "touched" --- although its not as fully sophisitcated as I would like - as the clear values button if shown - will reset the hidden field but not restore the old text in the editor.
//renderRichFieldTextarea react-redux field.
import React from 'react'
import RichEditor from '../_SharedGlobalComponents/RichEditor';
class ContentContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.input.value
};
this.handler = this.handler.bind(this);
}
handler(d) {
this.props.input.onChange(d);
}
render() {
const input = this.props.input;
const placeholder = this.props.placeholder;
const type = this.props.type;
const boxclass = this.props.boxclass;
return (
<div>
<RichEditor
initialValues={input.value}
handler={this.handler}
/>
<input {...input} type="hidden" />
</div>
);
}
}
const renderRichFieldTextarea = ({input, label, placeholder, boxclass, type, meta: {touched, error, warning}}) => (
<div className='field'>
<div>
<label>{label}</label>
</div>
<div>
<ContentContainer initialValues={input.value} onChange={this.onChange} input={input} placeholder={placeholder} type={type} boxclass={boxclass}/>
</div>
</div>
)
export default renderRichFieldTextarea
so I use it in a form component like this.
//EditPrivacySectionsSyncValidationForm - a react redux form
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Row, Col, Collapse } from 'antd';
import renderField from '../_SharedFormComponents/renderField'
import renderRichFieldTextarea from '../_SharedFormComponents/renderRichFieldTextarea'
import renderRadioCheckField from '../_SharedFormComponents/renderRadioCheckField'
import renderError from '../_SharedFormComponents/renderError'
import validate from './validateEditSections'
import warn from './warnEditSections'
const Panel = Collapse.Panel;
const EditPrivacySectionsSyncValidationForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit} >
<Row>
<Col xs={24} sm={24} md={24}>
<div>
<Field name="privacy" type="textarea" component={renderRichFieldTextarea} label="Privacy" placeholder="Please write here..." boxclass="tall"/>
</div>
</Col>
</Row>
<div>
<button type="submit" disabled={submitting}>
Submit
</button>{/*
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>*/}
</div>
</form>
)
}
//initialValues = {interest: "art"}
export default reduxForm({
form: 'syncValidationEditPrivacySections', // a unique identifier for this form
validate, // <--- validation function given to redux-form
warn // <--- warning function given to redux-form
})(EditPrivacySectionsSyncValidationForm)