#Help

1 messages · Page 1 of 1 (latest)

merry current
#

Hey, what do you need?

red berry
#

Hi, I created a word counter using some JS and as the user types I can't seem to insert the updated value into the view. Can I maybe drop the code here?

# 
import React from 'react';
import { Box, Grid } from '@material-ui/core';
import { Field } from 'formik';
import RightDrawer from '../RightDrawer/RightDrawer';

const { useState } = React;

const wordCountEvent = (event) => {
  const wordsCount = event.target.value.trim().split(' ');
  const data = wordsCount.length;
  const returnData = SetReturn(data);
  return returnData;
};

const SetReturn = (data) => {
  let currentWordCount = 0;
  currentWordCount += isNaN(parseInt(data)) ? 0 : parseInt(data);
  console.log('Counted: ', currentWordCount);
  return <p className="text-align-right">Word Count: {currentWordCount}</p>;
};

const isDisabled = false;

const Step2 = ({ title, objective }) => (
  <div>
    <Box mt={2} mb={0}>
      <Grid container direction="row" alignItems="center"   justify="space-between">
        <h2 className="subheading">{objective}</h2>
        <h2 className="heading">{title}</h2>
      </Grid>
    </Box>
    <Field
      disabled={isDisabled}
      maxLength="1020"
      className="textarea"
      onKeyUp={wordCountEvent}
      name="idealCustomer"
      component="textarea"
      placeholder="Fill in your answer here"
      multiLine
    />
    {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
    <SetReturn />
    {/* <p className="text-align-right">Max words: {currentWordCount}</p> */}
  </div>
);

export default Step2;
crimson merlin
#

you have useState referenced, but not used.
since you're using currentWordcount in both SetReturn and Step2, I'd recommend using useState in Step2.

#

you can also merge the useState reference into the react import.
import React, {useState} from 'react'; for instance.

red berry
#

Ah yes I can do that. I did attempt with useState but I can't seem to get the field to update onKeyUp once a user type. My return value stays at 0

#

Might I possibly ask for some help on the useState instance on how I would pass that to the view using useState please?

crimson merlin
#

ah. move wordCountEvent into Step2 and you can add the setState from useState

#

useState returns 2 values. const [state, setState] = useState(0) useState also accepts a default value, so since it's a count, you can default it to 0, which I did there.

red berry
#

With that I would need to change how I return Step2 const from my understanding?

crimson merlin
#

oh, yes, you'll need shift it to bracketed and add a return

#

so something like

const Component = () => {
const [state, useState] = useState(0);
return <span>{state}</span>;
}
red berry
#

Yeah, I changed it accordingly

red berry
crimson merlin
#

since your state is defined within the Step2 component, you'll need to move your function that performs the state change into the Step2 function.

#

let me write something up. I use material ui as well so I already have it imported.

red berry
#

Okay thank you, this is my first time with it so its a bit confusing still. Hopefully I can build something soon to improve my knowledge

crimson merlin
# 
import React, { useState } from 'react';
import { Box, Grid } from '@material-ui/core';
import { Field } from 'formik';

const isDisabled = false;

const Step2 = ({ title, objective }) => {
  const [wordCount, setWordCount] = useState(0);

  const handleWordCount = (event) => {
      const words = event.target.value.trim().split(' ');
      setWordCount(words.length);
  }

  return (
    <div>
      <Box mt={2} mb={0}>
        <Grid
          container
          direction='row'
          alignItems='center'
          justify='space-between'>
          <h2 className='subheading'>{objective}</h2>
          <h2 className='heading'>{title}</h2>
        </Grid>
      </Box>
      <Field
        disabled={isDisabled}
        maxLength='1020'
        className='textarea'
        onKeyUp={handleWordCount}
        name='idealCustomer'
        component='textarea'
        placeholder='Fill in your answer here'
        multiLine
      />
      <p className="text-align-right">Max words: {wordCount}</p>
    </div>
  );
};

export default Step2;
#

something like this.
A greater understanding of react hooks and such should help too.

#

I remember starting to work with React last year. I came from Angular so I had to pick up on everything. 🙂

red berry
#

Hectic that I will need to dig into it more to get a better grasp of this. I use Laravel/PHP and this is fairly new to me, so the dom initially just sees the updated data and renders only that again.

#

In theory then, my wordCountEvent functions would then also not be needed then?

crimson merlin
#

I renamed the wordcountevent. It's still there, but it's named handleWordCount
I have my own naming convention that I've seen in other react projects.

#

it's a function within the component.

#

so you're new to javascript too?

red berry
#

Correct yes, I noted it above the return, but the one outside the step2 const

red berry
crimson merlin
#

yeah, SetReturn wasn't needed.

#

My languages before JS/TS were VB and C#, so I came from strongly typed languages. I gravitate towards using TS so I can have my typing.

red berry
red berry
crimson merlin
#

I love my superscripts, lol.

#

hmm.. So you've read through the docs on the react webpage?

red berry
#

Just gone over them, though the project is based on next I read the docs there and could just not get it to do what I wanted, the rest works as intended but it was only the one field that had me going up the wall

#

I am after my current call in the next few minutes going to be doing the tutorial and docs with each step to understand

crimson merlin
#

ok 🙂 I'm happy to help if i can

red berry
#

Thank you, I appreciate that greatly